@import "settings.colors";

@import "mixins/components.package";

@import "mixins/tools.functions";
@import "mixins/tools.mixins";

// ------------------------------------
// Display
// ------------------------------------
.c-package--single-topic {
  border-width: 1px 0 0 1px;
  .c-package__label {
    font-size: rem(12);
    line-height: line-height(12, 12);
    color: $color-grey-660;
    border-width: 0 1px 0 0;
  }
  .u-wrapper {
    border-width: 0 1px 1px 0;
    &:first-of-type {
      @include c-package--display-card;
      .c-card {
        padding: 0;
      }
    }
    &:last-of-type {
      border-width: 0 1px 1px 0;
    }
  }
  .c-card__meta {
    display: none;
  }

  .c-card--opinion .c-card__meta,
  .c-card--column .c-card__meta {
    display: block;
  }
}

// ------------------------------------
// Inverted
// ------------------------------------

.c-package--single-topic--inverted {
  border-width: 0;
  .c-card__content-text,
  .c-card__hed,
  .c-card__dek,
  .c-card__meta,
  .c-package__label,
  .c-package__label-link,
  .c-card__hed__duration,
  .c-card__label--muted {
    color: $color-white;
  }

  .c-card__link {
    &:visited,
    &:hover,
    &:focus,
    &:active {
      .c-card__hed-text {
        color: $color-white;
      }
    }
  }

  .c-package__label {
    border-width: 0;
    padding: rem(10) 0 0;
    font-size: rem(12);
  }

  .c-indicator-icon__art {
    fill: $color-white;
  }

  .c-indicator-icon__art--ga--inverted {
    fill: $color-blue-200;
  }

  .c-card {
    background: transparent;
    padding: rem(10) 0;
  }

  .u-wrapper {
    border-color: rgba($color-white, .4);
  }

  .c-package__col {
    flex: 100%;

    &:first-of-type {
      .u-wrapper {
        border-width: 0 0 1px;
        @include c-package--display-card;
        .c-card__content {
          padding: rem(10) 0 0;
        }
        .c-card__dek {
          display: block;
          @include font-hed(15, 18, normal);
        }
      }
    }
    &:last-of-type {
      .c-card__dek,
      .c-card__media {
        display: none;
      }
    }
  }

  &.c-package--single-topic--inverted-stone200 {
    background-color: $color-stone-200;
  }
  &.c-package--single-topic--inverted-stone999 {
    background-color: $color-stone-999;
  }
  &.c-package--single-topic--inverted-grey800 {
    background-color: $color-grey-800;
  }
  &.c-package--single-topic--inverted-red500 {
    background-color: $color-red-500;
  }
  &.c-package--single-topic--inverted-red900 {
    background-color: $color-red-900;
  }
  &.c-package--single-topic--inverted-salmon900 {
    background-color: $color-salmon-900;
  }
  &.c-package--single-topic--inverted-merlot900 {
    background-color: $color-merlot-900;
  }
  &.c-package--single-topic--inverted-gold900 {
    background-color: $color-gold-900;
  }
  &.c-package--single-topic--inverted-rust900 {
    background-color: $color-rust-900;
  }
  &.c-package--single-topic--inverted-olive900 {
    background-color: $color-olive-900;
  }
  &.c-package--single-topic--inverted-teal900 {
    background-color: $color-teal-900;
  }
}
