@import '~scss/variables';
@import '~scss/mixins';

.card {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 8px 12px;
  border-bottom: 1px solid $border-color;
  background-color: $card-bg-color;
  transition: all $trans-speed cubic-bezier(0.175, 0.35, 0.32, 1);

  .icon {
    position: relative;

    .warn {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 14px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      color: $white;
      font-weight: 600;
      border-radius: 3px;
      background-color: $yellow;
      box-shadow: 0 2px 4px 0 rgba(245, 166, 35, 0.36);

      .tips {
        white-space: nowrap;
      }

      .skip {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        margin: -7px 0 0 0;
      }
    }
  }

  .info {
    width: calc(100% - 40px);
    padding: 0 24px;

    &.cursor {
      cursor: pointer;

      &:hover {
        strong, span {
          color: $primary;
        }
      }
    }

    strong {
      display: block;
      color: $title-color;
      font-weight: 600;
      font-size: $size-normal;
      line-height: 1.43;
      transition: all $trans-speed cubic-bezier(0.175, 0.35, 0.32, 1);
    }

    span {
      display: block;
      color: $third-text-color;
      line-height: 1.67;
      white-space: nowrap;
      transition: all $trans-speed cubic-bezier(0.175, 0.35, 0.32, 1);
    }
  }
}
