@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-card';

#{$Component} {
  /* prettier-ignore */
  @include border-thin($color: $color-border-light, $width: 1PX);

  margin: 0 $spacing-h-lg;
  border-radius: $border-radius-lg;
  background-color: $color-bg;

  /* elements */
  &__header {
    @include display-flex;
    @include align-items(center);

    /* prettier-ignore */
    @include border-thin-bottom($width: 1PX);

    padding: $spacing-v-md $spacing-h-lg;
    position: relative;

    &-title,
    &-extra {
      @include line;

      line-height: $line-height-zh;
    }

    &-thumb {
      @include flex(0, 0, $at-card-thumb-size);

      height: $at-card-thumb-size;
      display: block;
      line-height: 0;
      margin-right: $spacing-h-md;

      &-info {
        width: 100%;
        height: 100%;
      }
    }

    &-icon {
      margin-right: $spacing-h-md;
      font-size: $at-card-icon-size;
    }

    &-title {
      @include flex(auto);

      display: block;
      color: $at-card-title-color;
      font-size: $font-size-slg;
      font-weight: 500;
    }

    &-extra {
      @include flex(0, 0, auto);

      max-width: 200px;
      margin-left: $spacing-h-lg;
      color: $at-card-extra-color;
      font-size: $font-size-sml;
      display: flex;
      align-items: center;

      &-arrow {
        margin-left: $spacing-h-sm;
        font-size: $font-size-sm;
      }
    }
  }

  &__content {
    padding: $spacing-v-lg $spacing-h-lg;

    &-info {
      color: $at-card-info-color;
      font-size: $font-size-base;
    }

    &-note {
      margin-top: $spacing-v-md;
      color: $at-card-note-color;
      font-size: $font-size-sm;
    }
  }

  /* modifiers */
  &--full {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  &#{$Component}--type2 {
    border: 0;

    &#{$Component}--full {
      border-radius: $border-radius-lg;
    }

    #{$Component}__header {
      border: 0;
      padding: $spacing-v-lg $spacing-v-lg $spacing-h-xl;
    }

    #{$Component}__content {
      padding-top: 0;
    }
  }
}