@import "settings.breakpoints";
@import "settings.fonts";
@import "settings.colors";
@import "settings.z-index";

@import "mixins/objects.homepage-cards";
@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

///////////////////////////
// Mixins (only used by the CSS in this file)
///////////////////////////

// When the image is absolutely positioned (e.g. when using a lazy-load
// library), then it will overlap the label. To mitigate this, we must
// absolutely position the label as well.
@mixin o-card--single-md--absolute-label {
  .o-card__label-text {
    margin-top: rem(-20);
    position: absolute;
    z-index: $z-index-card-label;
  }
}

// Reverses the above
@mixin o-card--single-md--static-label {
  .o-card__label-text {
    margin-top: 0;
    position: static;
  }
}

///////////////////////////
// Basic Card Styles
///////////////////////////
.o-card--transparent {
  background-color: transparent;
  border: none;
}

.o-card--single-sm {
  background-color: $color-stone-150;
  border-left: rem(3) solid $color-red-900;
  border-top: none;
  border-right: none;
  border-bottom: none;
  flex: 100%;
  @include mq($until: mobileMedium) {
    .o-card__col {
      &:first-of-type {
        margin-right: 0;
      }
      &:nth-of-type(2n) {
        display: none;
      }
    }
  }
  @include mq($from: mobileMedium) {
    .o-card__col {
      &:nth-of-type(2n) {
        .c-image {
          float: right;
        }
      }
    }
  }
}

.o-card--single-md {
  padding: 0;
  border: none;
  flex: 100%;
  margin-top: rem(40);

  .o-card__link {
    &:visited {
      .o-card__hed-text {
        color: $color-stone-200;
      }
    }
    &:hover,
    &:focus {
      .o-card__hed-text {
        color: $color-white;
      }
    }
    &:active {
      .o-card__hed-text {
        color: $color-stone-500;
      }
    }
  }

  .o-card__content {
    flex-wrap: wrap;
  }

  .o-card__col {
    order: 1;
    flex: 100%;
    margin-top: 0;
    padding: 0;
    &:first-of-type {
      order: 2;
      margin-right: 0;
      padding: rem(10);
    }
  }

  @include o-card--single-md--absolute-label;

  @include mq($from: tablet) {
    .o-card__hed {
      @include font22b;
    }

    .o-card__col {
      order: 2;
      flex: 1;
      &:first-of-type {
        flex: 3;
        order: 1;
        margin-top: 0;
        padding-top: rem(10);
      }
    }

    @include o-card--single-md--static-label;
  }
}

// Key icon changes opacity when unlimited user
// is logged in and key is on a dark background
.u-user-role--unlimited {
  .o-card--single-md--red900,
  .o-card--single-md--gold,
  .o-card--single-md--grey,
  .o-card--single-md--red500,
  .o-card--single-md--olive,
  .o-card--single-md--rust,
  .o-card--single-md--stone,
  .o-card--single-md--teal {
    .c-indicator-icon__art--key {
      fill: $color-white;
      opacity: 0.5;
    }
  }
}

.o-card--single-md--red900 {
  background-color: $color-red-900;
  .o-card__label--inverted .o-card__label-text {
    color: $color-red-900;
  }
}
.o-card--single-md--gold {
  background-color: $color-gold-900;
  .o-card__label--inverted .o-card__label-text {
    color: $color-gold-900;
  }
}
.o-card--single-md--grey {
  background-color: $color-grey-800;
  .o-card__label--inverted .o-card__label-text {
    color: $color-grey-800;
  }
}
.o-card--single-md--red500 {
  background-color: $color-red-500;
  .o-card__label--inverted .o-card__label-text {
    color: $color-red-500;
  }
}
.o-card--single-md--olive {
  background-color: $color-olive-900;
  .o-card__label--inverted .o-card__label-text {
    color: $color-olive-900;
  }
}
.o-card--single-md--rust {
  background-color: $color-rust-900;
  .o-card__label--inverted .o-card__label-text {
    color: $color-rust-900;
  }
}
.o-card--single-md--stone {
  background-color: $color-stone-999;
  .o-card__label--inverted .o-card__label-text {
    color: $color-stone-999;
  }
}
.o-card--single-md--teal {
  background-color: $color-teal-900;
  .o-card__label--inverted .o-card__label-text {
    color: $color-teal-900;
  }
}

.o-card--single-md--square {
  margin-top: 0;
  @include mq($from: tabletMedium) {
    .o-card__col {
      order: 1;
      flex: 100%;
      margin-top: 0;
      padding: 0;
      &:first-of-type {
        order: 2;
        flex: 100%;
        margin-right: 0;
        padding: rem(10);
      }
    }

    @include o-card--single-md--absolute-label;
  }
}

///////////////////////////
// Card Labels
///////////////////////////
.o-card__label-text--red700 {
  background-color: $color-red-700;
}

.o-card__label-text--gold900 {
  background-color: $color-gold-900;
}

.o-card__label-text--rust900 {
  background-color: $color-rust-900;
}

.o-card__label-text--red500 {
  background-color: $color-red-500;
}

.o-card__label-text--stone999 {
  background-color: $color-stone-999;
}

.o-card__label--muted--red500 {
  .o-card__label-text {
    color: $color-red-500;
  }
}

.o-card__label--muted--white {
  .o-card__label-text {
    color: $color-white;
  }
}

.o-card__label--inverted {
  .o-card__label-text {
    background-color: $color-white;
    color: $color-red-700;
  }
}

.o-card__label--single-sm {
  .o-card__label-text {
    background-color: transparent;
    color: $color-red-900;
    padding: 0;
  }
}

///////////////////////////
// Card Hed (Title)
///////////////////////////
.o-card__hed--17b {
  @include font17b;
}

.o-card__hed--19r {
  @include font19r;
}

.o-card__hed--22b {
  @include font22b;
}

.o-card__hed--24b {
  @include font24b;
}

.o-card__hed--24r {
  @include font24r;
}

.o-card__hed--28b {
  @include font28b;
}

.o-card__hed--32b {
  @include font32b;
}

.o-card__hed--38b {
  @include font38b;
}

.o-card__hed--single-md {
  @include o-card-hed-single-md;
}

// TODO: Delete this when we've replaced all of the Escenomatic9000
// features with their new curated equivalents
@include mq($from: tablet) {
  .o-card__dek--hide-when-wide {
    display: none;
  }
}
