@use 'sass:map';
@use '../../global/scss/tools' as nsw;

.nsw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  color: var(--nsw-text-dark);
  border-radius: var(--nsw-border-radius);

  &:hover {
    color: var(--nsw-text-light);

    .nsw-card__content {
      background-color: var(--nsw-brand-dark);
      border-color: transparent;

      &::after {
        background-color: transparent;
      }
    }

    .nsw-card__image {
      &::after {
        background-color: transparent;
      }
    }

    a {
      color: var(--nsw-text-light);
    }

    .nsw-material-icons {
      color: var(--nsw-text-light);
    }

    .nsw-section--invert & {
      color: var(--nsw-text-dark);

      .nsw-card__content {
        background-color: var(--nsw-brand-light);

        &::after {
          background-color: transparent;
        }
      }
    }
  }

  &:focus-within {
    @include nsw.nsw-focus;

    a {
      text-decoration: none;
    }

    .nsw-section--invert & {   
      @include nsw.nsw-focus($color: var(--nsw-focus-light));
    }
  }

  &__content {
    padding: nsw.rem(16px) nsw.rem(16px) nsw.rem(62px) nsw.rem(16px);
    background-color: var(--nsw-white);
    border-radius: var(--nsw-border-radius);
    border: 1px solid var(--nsw-grey-03);
    display: flex;
    flex-direction: column;
    height: 100%;

    @include nsw.font-size('sm');

    @include nsw.breakpoint('lg') {
      padding: nsw.rem(32px) nsw.rem(32px) nsw.rem(94px) nsw.rem(32px);
    }
      
    .nsw-section--invert & {    
      border-color: transparent;
    }
  }

  &__title {
    font-weight: var(--nsw-font-bold);
    text-wrap: pretty;

    @include nsw.font-size('md');

    a {
      @include nsw.pseudo-clickable-block;
      text-decoration: none;
      color: var(--nsw-text-dark);

      &:focus {
        outline: none;
      }

      &:hover {
        background-color: transparent;
        outline: none;
      }
      
      .nsw-section--invert & {    
        color: var(--nsw-text-dark);
      }
    }
  }

  &__copy {
    margin-top: nsw.rem(16px);
    text-wrap: pretty;
  }

  &__tag,
  &__date {
    margin-bottom: nsw.rem(16px);

    @include nsw.font-size('xs');
  }

  &__tag {
    font-weight: var(--nsw-font-bold);

    + .nsw-card__date {
      margin-top: nsw.rem(-8);
    }
  }

  .nsw-material-icons {
    font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 30));
    color: var(--nsw-brand-dark);
    position: absolute;
    bottom: nsw.rem(16px);
    left: nsw.rem(16px);

    @include nsw.breakpoint('lg') {
      bottom: nsw.rem(32px);
      left: nsw.rem(32px);
    }

    .nsw-section--invert & {    
      color: var(--nsw-brand-dark);
    }
  }

  &__image {
    min-height: nsw.rem(200px);
    height: nsw.rem(200px);
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    + .nsw-card__content {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-top-width: 0;

      &::after {
        display: none;
      }
    }
  }

  &--light {
    &:hover {      
      .nsw-section--brand-light & {
        .nsw-card__content {
          border-color: var(--nsw-brand-dark);
        }
      }

      .nsw-section--invert & {  
        .nsw-card__content {  
          background-color: var(--nsw-white);
        }
      }
    }

    .nsw-card__content {
      background-color: var(--nsw-brand-light);
      border-color: transparent;

      .nsw-section--brand-light & {
        border-color: var(--nsw-brand-dark);
      }

      &::before,
      &::after {
        display: none;
      }
    }

    .nsw-card__image {
      &::after {
        display: none;
      }
    }
  }

  &--dark {
    color: var(--nsw-text-light);

    &:hover {
      color: var(--nsw-text-dark);

      .nsw-card__content {
        background-color: var(--nsw-white);
        border-color: var(--nsw-grey-03);
      }

      .nsw-card__title a {
        color: var(--nsw-text-dark);
      }

      .nsw-material-icons {
        color: var(--nsw-brand-dark);
      }

      .nsw-section--invert & {  
        .nsw-card__content {  
          background-color: var(--nsw-white);
        }

        .nsw-material-icons {
          color: var(--nsw-brand-dark);
        }
      }
    }

    .nsw-card__content {
      background-color: var(--nsw-brand-dark);
      border-color: transparent;

      &::before,
      &::after {
        display: none;
      }
      
      .nsw-section--invert & {    
        border-color: var(--nsw-white);
      }
    }

    .nsw-card__image {
      &::after {
        display: none;
      }
    }

    .nsw-card__title a {
      color: var(--nsw-text-light);
    }

    .nsw-material-icons {
      color: var(--nsw-text-light);

      .nsw-section--invert & {  
        color: var(--nsw-text-light);
      }
    }
  }

  &--headline {
    .nsw-card__title {
      @include nsw.font-size('lg');
    }
  }

  &--highlight {
    .nsw-card__content {
      &::before {
        content: '';
        height: 4px;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background-color: var(--nsw-brand-accent);
      }
    }

    .nsw-card__image {
      &::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        height: 4px;
        background-color: var(--nsw-brand-accent);
      }
    }
  }

  &--horizontal {
    @include nsw.breakpoint('md') {
      flex-direction: row;
      align-items: stretch;

      .nsw-card__content {
        flex: 1 1 50%;
        height: auto;

        > .nsw-material-icons {
          left: calc(50% + #{nsw.rem(16px)});
        }
      }

      .nsw-card__image {
        flex: 1 1 50%;
        position: relative;
        height: auto;

        + .nsw-card__content {
          border-top-right-radius: var(--nsw-border-radius);
          border-bottom-left-radius: 0;
          border-top-width: 1px;
          border-left-width: 0;
        }
      }

      &.nsw-card--highlight {
        .nsw-card__image::after {
          top: 0;
          bottom: 0;
          left: auto;
          right: -4px;
          width: 4px;
          height: auto;
        }
      }
    }

    @include nsw.breakpoint('lg') {
      .nsw-card__content > .nsw-material-icons {
        left: calc(50% + #{nsw.rem(32px)});
      }
    }
  }

  &--border {
    position: relative;

    &.nsw-card--highlight,
    &.nsw-card--light,
    &.nsw-card--dark {
      .nsw-card__image {
        &::after {
          display: unset;
        }
      }
    }

    .nsw-card__image {
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--nsw-border-radius);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow:
          inset 0 1px 0 rgba(17, 24, 39, 0.2), /* top */
          inset 1px 0 0 rgba(17, 24, 39, 0.2), /* right */
          inset -1px 0 0 rgba(17, 24, 39, 0.2); /* left */
        pointer-events: none;
      }
    }

    &.nsw-card--horizontal {
      .nsw-card__image {
        &::after {
          position: absolute;
          inset: 0;
          border-radius: var(--nsw-border-radius);
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
          box-shadow:
            inset 0 1px 0 rgba(17, 24, 39, 0.2), /* top */
            inset 1px 0 0 rgba(17, 24, 39, 0.2), /* right */
            inset 0 -1px 0 rgba(17, 24, 39, 0.2); /* bottom */
          pointer-events: none;
        }
      }
    }

    &.nsw-card--highlight {
      .nsw-card__image {
        &::after {
          background-color: transparent;
          height: unset;
          width: unset;
        }
      }

      .nsw-card__image {
        box-shadow:
          -1px 0 0 0 var(--nsw-grey-03), /* Left */
          1px 0 0 0 var(--nsw-grey-03), /* Right */
          0 -1px 0 0 var(--nsw-grey-03), /* Top */
          0 4px 0 0 var(--nsw-brand-accent); /* Bottom (4px) */
      }

      &:hover {
        .nsw-card__image {
          box-shadow:
            -1px 0 0 0 var(--nsw-grey-03), /* Left */
            1px 0 0 0 var(--nsw-grey-03), /* Right */
            0 -1px 0 0 var(--nsw-grey-03), /* Top */
            0 4px 0 0 transparent; /* Bottom (4px) */
        }

        &.nsw-card--horizontal .nsw-card__image {
          border-radius: var(--nsw-border-radius);
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          box-shadow:
            -1px 0 0 0 var(--nsw-grey-03),  /* Left */
            4px 0 0 0 transparent, /* Right */
            0 -1px 0 0 var(--nsw-grey-03),  /* Top */
            0 1px 0 0 var(--nsw-grey-03);   /* Bottom */
        }
      }

      &.nsw-card--horizontal {
        .nsw-card__image {
          border-radius: var(--nsw-border-radius);
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          box-shadow:
            -1px 0 0 0 var(--nsw-grey-03),  /* Left */
            4px 0 0 0 var(--nsw-brand-accent), /* Right */
            0 -1px 0 0 var(--nsw-grey-03),  /* Top */
            0 1px 0 0 var(--nsw-grey-03);   /* Bottom */
        }
      }
    }
  }
  
  @media (prefers-reduced-motion: no-preference) {
    &__content {
      transition: background-color nsw.$nsw-transition-duration, border-color nsw.$nsw-transition-duration;
    }

    &__title a,
    &__copy,
    &__tag,
    &__date,
    .nsw-material-icons {
      transition: color nsw.$nsw-transition-duration;
    }

    &--highlight {
      .nsw-card__content::after,
      .nsw-card__image::after {
        transition: background-color nsw.$nsw-transition-duration;
      }
    }

    &--border {
      &.nsw-card--highlight {
        .nsw-card__image {
          transition: box-shadow nsw.$nsw-transition-duration;
        }
      }
    }
  }
}