//specific styling for background off white
.bg-brand--off-white,
.bg-brand--light-grey {
  .cards__item {
    background: $color-brand--white;
  }

  .cards__title a {
    color: $color-brand--one;
  }

  .cards__item--animate {
    .cards__backside-card, & {
      animation: blueToWhite 300ms;
    }

    .cards__backside-footer .button--off-white {
      @include button--light;
    }
  }
}

.cards {

  // specific for format-carousel
  &__list--format-carousel {
    display: flex;
  }

  // item
  &__item {
    @include word-break;
    background: $cards-colors-background;
    border: 2px solid transparent;
    border-radius: $border-radius--l;
    display: flex !important; // overwrite potential inline style set by slick slider
    flex-direction: column;
    height: 100%;
    min-height: 290px;
    padding: $card-spacing + 2; //add 2 px to fit in grid
    position: relative;
    transition: border $transition-duration, color $transition-duration;

    // background mapping
    &.bg-brand--blue {
      background: $cards-colors-backside-background;
      border-color: $cards-colors-backside-background;

      &.cards__item--more {
        background: $cards-colors-more-variant;
      }
    }

    img {
      align-self: flex-start;
      flex-shrink: 0; // prevent image stretch in ie
      max-width: 100%;
    }

    &__list--format-list & {
      img {
        max-width: $card-more-image-width;
      }
    }
  }

  // header
  &__header {
    display: flex;
    justify-content: space-between;
  }

  &__logo-title-container {
    width: 100%;

    .notice-in-page {
      margin-top: $spacing--s;
      max-width: unset;
    }
  }

  // logo
  &__logo {
    margin-bottom: $spacing--s;
    max-width: $card-brand-logo-max-width;
    width: 100%;

    .cards__logo-image {
      background-position-y: center;
      background-repeat: no-repeat;
      background-size: contain;
      height: $card-brand-logo-height;
    }
  }

  // title
  &__title {
    @include font-style($card-title-regular);
    color: $color-brand--one;
    min-width: 0; // fix issues with word-break on flex items
  }

  // link
  &__link {
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    &,
    &:hover {
      text-decoration: none;
    }

    .make-entire-card-clickable {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      z-index: 1;
      width: 100%;
    }
  }

  &__description {
    color: $color--two-50;
    display: none;
    margin: $spacing--s 0;
    max-height: $baseline * 8.6;
    overflow: hidden;
    padding-right: 100px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }


  // icon toggler
  .icon__toggler {
    flex-shrink: 0;
    margin-left: 20px;
    z-index: 2;

    .icon {
      color: $color--two-50;
    }

    .icon + .icon {
      color: $cards-colors-heart;
    }

    &:hover svg {
      fill: $cards-colors-heart;
    }

    // prevent icon hover effect on touch devices
    @media (hover: none) {
      &:not(.icon__toggler--active):hover svg {
        fill: $color--two-50;
      }
    }
  }

  // meta
  &__meta {
    @include font-style('body--m', 'body--l');
    color: $color-brand--two;


    &-item {
      align-items: flex-start;
      display: flex;

      & + & {
        margin-top: $spacing--xxs;
      }

      .icon {
        color: $color--two-50;
        flex-shrink: 0;
        margin-right: 15px;
        margin-top: $baseline * 0.3;
      }
    }
  }

  // card disabled
  &__item--disabled {
    .cards__title,
    .cards__title a,
    .cards__meta {
      color: $color--two-50;
    }

    .cards__info-wrapper,
    .cards__backside-card,
    .cards__backside-footer {
      display: none;
    }

    .cards__link {
      pointer-events: none;
    }

    .icon__toggler {
      display: none;
    }

    .icon__toggler.icon__toggler--active {
      display: block;
    }
  }


  // footer
  &__footer {
    @include font-style('body--m', 'body--l');
    display: flex;
    justify-content: space-between;
    margin-top: auto;
  }

  &__time-info {
    display: flex;
    flex-direction: column-reverse;
    white-space: nowrap;
  }

  &__info-wrapper {
    align-items: center;
    background: transparent;
    display: flex;
    height: $baseline * 4;
    justify-content: center;
    margin-bottom: $baseline * -0.7;
    margin-right: -5px;
    width: $icon-size--xl;
    z-index: 1;

    .cards__info-button {
      align-items: center;
      display: flex;
      justify-content: center;
    }

    &:hover {
      cursor: pointer;

      .cards__info-button > .icon {
        color: $color-brand--two;
      }
    }
  }

  &__info-button {
    .icon {
      color: $color--two-50;
      transition: color $transition-duration--fast;
    }
  }

  &__expiration {
    display: inline-block;
  }

  &__date,
  &__expiration {
    margin: $spacing--xxs $spacing--xxs 0 0;
  }


  // specific styling for the backside/overlay description when clicked on info-button
  &__backside-card {
    height: 0;
    opacity: 0;

    .cards__backside-description {
      @include font-style('body--m');
      bottom: -$spacing--s; //set for animation transition
      color: $color-brand--white;
      display: block; /* Fallback for non-webkit */
      display: -webkit-box;
      height: 88%;
      margin-bottom: 20px;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      position: absolute;
    }

    .cards__backside-footer {
      bottom: -$spacing--s; //set for animation transition
      display: inline-flex;
      opacity: 0;

      &__button {
        @include font-style('body--m');
        align-items: center;
        color: $cards-colors-backside-footer-button;
        display: flex;
        text-decoration: none;
        white-space: nowrap;
      }

      &--job-link {
        margin-right: 30px;
      }

      &--close-backside {
        opacity: 0;
        visibility: hidden;
      }


      .button-text {
        color: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .icon {
        color: inherit;
        margin-right: 10px;
        top: $card-icon-top--one;
      }
    }
  }


  // backside is active
  li.cards__item--backside-active {

    .cards__backside-card, & {
      background: $cards-colors-backside-background;
      height: 100%;
      opacity: 1;
    }

    .cards__backside-description {
      bottom: 0; //set for animation transition
      hyphens: auto;
      opacity: 1;
      position: relative;
      transition: opacity $transition-duration ease 100ms, bottom $transition-duration;
      visibility: visible;

      &::before {
        background: linear-gradient(to bottom, rgba($cards-colors-backside-background, 0), 80%, rgba($cards-colors-backside-background, 100));
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }

    .cards__backside-footer {
      bottom: 0; //set for animation transition
      opacity: 1;
      position: relative;
      transition: opacity $transition-duration ease 100ms, bottom $transition-duration;
      visibility: visible;

      &--close-backside {
        color: $color-alpha--four-50;
        cursor: pointer;
        opacity: 1;
        transition-duration: $transition-duration--fast;
        visibility: visible;

        &:hover {
          color: $cards-colors-close-icon-hover;
          transition-duration: $transition-duration--fast;
        }
      }
    }

    .cards__header,
    .cards__meta,
    .cards__footer,
    .cards__title {
      display: none;
    }
  }

  //class set from cards.js to animate close backside, code is duplicated for purpose of animation (iow, the other class does not exist at the moment its active)
  &__item--animate {
    .cards__backside-card, & {
      animation: blueToOffWhite 300ms;
      height: 100%;
      opacity: 1;
    }

    .cards__backside-description {
      bottom: 0; //set for animation transition
      display: block; /* Fallback for non-webkit */
      display: -webkit-box;
      height: 88%;
      margin-bottom: 20px;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      position: relative;
      transition: opacity $transition-duration--faster;
      visibility: visible;

      &::before {
        background: linear-gradient(to bottom, rgba($cards-colors-backside-background, 0), 80%, rgba($cards-colors-backside-background, 100));
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }

    .cards__backside-footer {
      bottom: 0;
      display: inline-flex;
      opacity: 0;
      position: relative;
      transition: bottom $transition-duration--fast;
      visibility: visible;

      &--close-backside {
        opacity: 0;

        .icon {
          margin-right: 0;
        }
      }
    }

    .cards__header,
    .cards__meta,
    .cards__footer,
    .cards__title {
      display: none !important; //overwrite is needed because animation class is set by js for 300ms to overrule display flex *card.js
    }
  }

  // 'more' card overwrites
  &__item--more {
    border: none;
    min-height: 200px;

    .cards__link {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    img {
      margin: auto;
    }

    .button {
      position: relative;
      z-index: 1;
    }

    &-spherion {
      justify-content: flex-end;
      min-height: 300px;
    }
  }
}

// viewport s
@include viewport--m('inversed') {
  .cards {
    padding: 0;

    &__list {

      //specific styling for carousel slider
      &--format-carousel {
        padding: 0 $grid-margin--s;

      }

      &--format-grid,
      &--format-list {
        .cards__item {
          border-radius: 0;
        }
      }
    }

    .cards__backside-footer {
      justify-content: space-between;
      width: 100%;
    }

    .button-text {
      display: none;
    }
  }
  .cards__backside-card {
    .cards__backside-description {
      height: 84%;
    }
  }
}

// viewport m only
@include viewport--m('range') {
  .cards {
    padding: 0 $grid-margin--m;

    &__item--more {
      img {
        max-width: $card-more-image-width;
      }
    }
  }
  .cards__backside-card {
    .cards__backside-description {
      height: 86%;
    }
  }
}

@include viewport--l('range') {
  .cards__backside-footer {
    justify-content: space-between;
    width: 100%;
  }

  .button-text {
    display: none;
  }
}

// viewport m l
@include viewport--m() {
  .cards {
    li.cards__item--backside-active .cards__backside-footer {
      bottom: $spacing--xs;
      max-width: 220px;
    }

    &__item--animate {
      .cards__backside-footer {
        bottom: $spacing--xs;
      }
    }
  }
}

// viewport s - m
@include viewport--l('inversed') {
  .cards {
    &__list.slick-slider {
      width: grid-columns(5, 6);
    }

    &__list {
      &--format-grid {
        .cards__item {
          margin-bottom: $spacing--xxs;
        }
      }

      &--format-list {
        .cards__item {
          margin-bottom: $spacing--xs;
        }
      }
    }

    &__meta {
      margin-bottom: $baseline * 1.5;
      margin-top: $spacing--s;
    }

    // slick slider
    .slick {
      &-list {
        overflow: visible;
      }

      &-track {
        display: flex !important; // overwrite inline values set by slick slider
      }

      &-slide {
        float: none;
        height: inherit;

        > div {
          height: 100%;
        }
      }
    }

    // styling for cards carousel prior to slick init
    // this will minimize content jumps
    &__list:not(.slick-slider) {
      width: 100%;

      // item
      .cards__item {
        .cards__list--format-carousel & {
          flex-shrink: 0;
          height: auto;
          width: grid-columns(5, 6);

          &:not(:first-child) {
            margin-left: 6vw;
          }
        }
      }
    }
  }

}

// viewport l
@include viewport--l {
  .cards {

    // meta
    &__meta {
      margin-top: $spacing--s;

      .cards__meta-item:last-child {
        margin-bottom: ($spacing--xs);
      }
    }

    // list
    &__list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;

      &::after {
        content: '';
        display: block;
      }

      &::after,
      .cards__item {
        margin-bottom: $spacing--m; // margin bottom used because of IE11 (instead of grid-gap)
        width: grid-columns(4, 12);
      }


      // if supported use grid
      @supports (display: grid) {
        display: grid;
        grid-template-columns: repeat(3, grid-columns(4, 12));

        & {
          margin-bottom: $spacing--xxs;
        }

        .cards__item {
          width: auto;


          &:not(:first-child) {
            margin-left: 0;
          }
        }
        &::after {
          content: '';
          display: none;
        }
      }

      li.cards__item--backside-active .cards__backside-footer {
        .icon {
          top: $card-icon-top--two;
        }
      }


      &--format-grid,
      &--format-carousel {
        .cards__meta {
          @include font-style('body--m');
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        }

        .cards__date {
          @include font-style('body--m');
        }
      }

      // styling specific for display as a list
      &--format-list {

        &::after,
        .cards__item {
          margin-bottom: $spacing--s;
          width: 100%;
        }

        @supports (display: grid) {
          display: grid;
          grid-template-columns: repeat(1, grid-columns(12, 12));
        }

        .cards__title {
          @include font-style($card-title-large, $card-title-large);
        }

        .cards__meta {
          display: flex;
          flex-flow: wrap;
          margin-top: $baseline * 3;
        }

        .cards__meta-item {
          align-items: center;
          margin-right: $spacing--m;
          margin-top: 0;

          &:last-child {
            margin-bottom: 0;
          }

          .icon {
            margin: 0 $spacing--xs 0 0;
            cursor: pointer;
            z-index: 0;
          }
        }

        .cards__description {
          display: block;
          display: -webkit-box;
        }

        .cards__footer {
          display: block;

          .cards__date {
            @include font-style('body--l');
            margin-right: $spacing--xs;
          }
        }

        .cards__info-wrapper {
          display: none;
        }
      }
    }

    // item
    &__item {
      flex-shrink: 0;
      height: auto;
      padding: $card-spacing--l;
      width: 100%;

      // hover state for all cards except 'more' and 'disabled'
      &:not(.cards__item--more):not(.cards__item--disabled):hover {
        border-color: $color-brand--one;
        transition: border $transition-duration--fast;
      }

      // active state (set by JS) for all cards except 'more', 'disabled' and 'backside active'
      &--active:not(.cards__item--more):not(.cards__item--backside-active):not(.cards__item--disabled) {
        &,
        &:hover,
        &:focus {
          background-color: $color--one-10;
          border-color: $color-brand--one;
          transition: border $transition-duration--fast, background-color $transition-duration--fast;
        }
      }
    }


  }
}


// viewport xl
@include viewport--xl {
  .cards {
    &__list--format-grid {
      .cards__item {
        margin-bottom: $baseline * 4; // margin bottom used because of IE11 (instead of grid-gap)
      }
    }
  }
}

//keyframes animation
@keyframes blueToOffWhite {
  from {
    background-color: $cards-colors-backside-background;
  }
  to {
    background-color: $cards-colors-background;
  }
}

@keyframes blueToWhite {
  from {
    background-color: $cards-colors-backside-background;
  }
  to {
    background-color: $color-brand--white;
  }
}
