@import '../../style/func.less';
@import './variables.less';

@layout-card-prefix: ~'@{opt-prefix}layout-card';

.@{layout-card-prefix} {
  padding         : 16px;
  background-color: #ffffff;

  &__title {
    width       : 100%;
    height      : 16px;
    line-height : 16px;
    font-size   : 14px;
    padding-left: 10px;
    position    : relative;
    text-align  : left;

    &::before {
      content         : ' ';
      width           : 4px;
      height          : 16px;
      background-color: #5778EE;
      position        : absolute;
      top             : 0;
      left            : 0;
    }
  }

  &__gradient {
    overflow  : hidden;
    padding   : 12px;
    transition: all 0.2s ease-out;
    cursor    : pointer;

    &:hover {
      box-shadow: 1px 1px 10px 1px #c1c1c1;
      transform : scale(1.02);
    }

    &--title {
      width      : 100%;
      height     : 16px;
      line-height: 16px;
      font-size  : 14px;
      color      : #ffffff;
    }

    &--content {
      float       : right;
      margin-top  : 14px;
      margin-right: 12px;
      text-align  : right;
      color       : #ffffff;
    }
  }

  &__dashboard {
    flex-direction : column;
    justify-content: space-between;
    align-items    : flex-start;
    overflow       : hidden;
    padding        : 16px 18px 24px 18px;
    transition     : all 0.2s ease-out;
    border-radius  : 4px;
    cursor         : pointer;

    &:hover {
      box-shadow: 1px 1px 10px 1px #c1c1c1;
      transform : scale(1.02);
    }

    &--title {
      line-height: 1;
      color      : #ffffff;
      font-size  : 20px;

      span:last-child:not(:first-child) {
        font-size: 14px;
      }
    }

    &--content {
      width          : 100%;
      display        : flex;
      flex-direction : row;
      justify-content: space-between;
      align-items    : flex-end;
    }

    &--font {
      display        : flex;
      justify-content: flex-start;
      align-items    : flex-end;
      font-size      : 26px;
      color          : #ffffff;
      line-height    : 1;

      span:last-child:not(:first-child) {
        position   : relative;
        bottom     : 2px;
        margin-left: 8px;
        font-size  : 16px;
      }
    }

    &--icon {
      position: relative;
      top     : 4px;

      .anticon {
        color    : rgba(125, 125, 125, 0.4);
        font-size: 36px;
      }
    }
  }
}