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

  // item
  &__item {
    @include word-break;
    background: returnColorCSSVar('brand-tertiary');
    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: $cards-item-spacing-bottom-top + 2 $cards-item-spacing-left-right +
      2; //add 2 px to fit in grid
    position: relative;
    transition: border $transition-duration, color $transition-duration;
  }

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

  &__list--format-list & {
    img {
      max-width: $cards-item-image-width;
    }
  }

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

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

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

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

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

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

  // link
  &__link {
    color: returnColorCSSVar('brand-secondary');
    text-decoration: none;
    text-decoration-color: transparent;
    &:hover {
      text-decoration: none;
    }

    // &:focus {
    //   outline: solid currentColor;
    // }

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

  &__description {
    @include color-dark-shade-alternative;
    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: auto; // prevents svg from moving outside of parent
    z-index: 2;

    .icon {
      @include color-dark-shade-alternative;
    }

    // prevent icon hover effect on touch devices
    @media (hover: none) {
      &:not(.icon__toggler--active):hover svg {
        @include color-dark-shade-alternative;
      }
    }
  }

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

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

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

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

      &--link a {
        white-space: pre-wrap; // fixes text behavior long words when meta items include a link
      }
    }
  }

  // card disabled
  &__item--disabled {
    .cards__title,
    .cards__title a,
    .cards__meta,
    .cards__meta-item .icon,
    .cards__date {
      @include color-dark-shade-alternative;
    }

    .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;
  }

  &__status-info {
    @include font-style('body--m');
  }

  &__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;
    }
  }

  &__info-button {
    .icon {
      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
      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;

      &--horizontal {
        @include font-style('body--m');
        align-items: center;
        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: $cards-backside-footer-icon-top;
      }
    }
  }

  // backside is active
  li.cards__item--backside-active {
    .cards__backside-card,
    & {
      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 {
        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 {
        cursor: pointer;
        opacity: 1;
        transition-duration: $transition-duration--faster;
        visibility: visible;

        &:hover {
          transition-duration: $transition-duration--faster;
        }
      }
    }

    .cards__header,
    .cards__meta,
    .cards__footer,
    .cards__title,
    .cards__badge {
      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 {
        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--faster;
      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: $cards-item-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;
        }

        &--halves {
          grid-template-columns: repeat(2, grid-columns(6, 12));
        }

        &--quarters {
          grid-template-columns: repeat(4, grid-columns(3, 12));
          grid-row-gap: 40px;
        }

        .cards__item {
          width: auto;

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

      // li.cards__item--backside-active .cards__backside-footer {
      //   .icon {
      //     top: $cards-list-backside-footer-icon-top;
      //   }
      // }

      &--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($cards-title--l, $cards-title--l);
        }

        .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: $cards-item-spacing--l;
      width: 100%;

      // hover state for all cards except 'more' and 'disabled'
      &:not(.cards__item--more):not(.cards__item--disabled):hover {
        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 {
          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)
      }
    }
  }
}

// background mappings (was on top for cascading)
@include cards-general-background-mapping;