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

.nsw-accordion {
  @include nsw.component-spacing();

  &__title,
  &__button {
    font-weight: var(--nsw-font-bold);
    padding: nsw.rem(16px) nsw.rem(48px) nsw.rem(16px) nsw.rem(16px);
    margin-top: nsw.rem(8px);
    background-color: var(--nsw-off-white);
    display: block;
    width: 100%;
    text-align: left;
    text-wrap: pretty;
    position: relative;
    transition: background nsw.$nsw-transition-duration, color nsw.$nsw-transition-duration;

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

    .active,
    &:hover & {
      background-color: var(--nsw-brand-dark);
      color: var(--nsw-text-light);
      cursor: pointer;

      .nsw-section--invert & {    
        background-color: var(--nsw-brand-light);
        color: var(--nsw-text-dark);
        
        .nsw-material-icons {
          color: var(--nsw-brand-dark);
        }
      }

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

  &__toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: nsw.rem(16px);

    button {
      color: var(--nsw-link);
      text-decoration: underline;
      text-decoration-skip-ink: auto;
      font-weight: var(--nsw-font-bold);
      border: 0;
      padding: 0;
      background: none;

      @include nsw.link;
      @include nsw.font-size('sm');
      
      &:hover:enabled:not(.disabled) {
        @include nsw.nsw-hover;
        outline: 2px solid var(--nsw-hover);
        cursor: pointer;

        .nsw-section--invert & {    
          background-color: var(--nsw-hover-light);
          outline-color: var(--nsw-hover-light);
        }
      }

      &:focus {
        @include nsw.nsw-focus($offset: false);
      }

      &:first-child {
        margin-right: nsw.rem(24px);
      }

      &:disabled,
      &.disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }      

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

        &:focus {
          outline-color: var(--nsw-focus-light);
        }
      }
    }
  }

  &__title {
    .ready & {
      padding: 0;
      margin-top: 0;
    }

    .nsw-material-icons {
      font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 30));
      color: var(--nsw-brand-dark);
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      right: nsw.rem(8px);
      transition: transform nsw.$nsw-transition-duration, color nsw.$nsw-transition-duration;
    }
  }

  &__button {
    border: 0;
    color: var(--nsw-text-dark);

    &:focus {
      position: relative;

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

    &.active {
      .nsw-material-icons {
        transform: translateY(-50%) rotate(180deg);
      }
    }
  }

  &__content[hidden='until-found'] {
    display: none;
    visibility: hidden;
    height: 0;
    padding: 0;
    overflow: hidden;
  }

  &__content {
    padding-left: nsw.rem(16px);
    padding-right: nsw.rem(16px);
  }

  .nsw-accordion__content > :first-child {
    padding-top: nsw.rem(16px);
  }

  .nsw-accordion__content > :last-child {
    padding-bottom: nsw.rem(16px);
  }

  // Details/summary variation styles

  &__item {
    margin-top: nsw.rem(8px);
    overflow: visible;
    interpolate-size: allow-keywords; /* stylelint-disable-line property-no-unknown -- experimental details animation property */
  
    &::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size nsw.$nsw-transition-duration-smooth, content-visibility nsw.$nsw-transition-duration-smooth; /* stylelint-disable-line property-no-unknown -- experimental details animation property */
      transition-behavior: allow-discrete; /* stylelint-disable-line property-no-unknown -- experimental details animation property */
    }
  
    &[open]::details-content {
      block-size: auto;
    }
  
    > .nsw-accordion__title {
      position: relative;
      padding: nsw.rem(16px) nsw.rem(48px) nsw.rem(16px) nsw.rem(16px);
      margin-top: 0;
      width: unset;
      display: block;
      cursor: pointer;
      user-select: none;
      transition: background nsw.$nsw-transition-duration, color nsw.$nsw-transition-duration;
  
      // Remove native marker
      list-style: none;
  
      &::-webkit-details-marker {
        display: none;
      }
  
      &::marker {
        content: '';
      }
  
      &::after {
        content: '\e313';
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: nsw.rem(8px);
        font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 30));
        font-weight: var(--nsw-font-normal);
        color: var(--nsw-brand-dark);
        transition: transform nsw.$nsw-transition-duration-smooth, color nsw.$nsw-transition-duration-smooth;
        pointer-events: none;
  
        @include nsw.material-icons;
      }
  
      &:hover {
        background-color: var(--nsw-brand-dark);
        color: var(--nsw-text-light);
  
        &::after {
          color: var(--nsw-text-light);
        }
      }
  
      &:focus-visible {
        @include nsw.nsw-focus;
        @include nsw.z-index;
      }
    }
  
    > .nsw-accordion__content-wrap {
      padding: 0;
    }
  
    .nsw-accordion__content {
      overflow: hidden;
      min-block-size: 0;
    }
  
    .nsw-accordion__content > :first-child {
      padding-top: nsw.rem(16px);
    }
  
    .nsw-accordion__content > :last-child {
      padding-bottom: nsw.rem(16px);
    }
  
    &[open] > .nsw-accordion__title {
      background-color: var(--nsw-brand-dark);
      color: var(--nsw-text-light);
  
      &::after {
        transform: translateY(-50%) rotate(180deg);
        color: var(--nsw-off-white);
      }
    }
  }

  @include nsw.prefers-reduced-motion() {
    &__item {
      &::details-content,
      > .nsw-accordion__title,
      > .nsw-accordion__title::after {
        transition: none;
      }
    }
  }
}

.nsw-section--invert .nsw-accordion__item > .nsw-accordion__title {
  background-color: var(--nsw-off-white);
  color: var(--nsw-text-dark);
}

.nsw-section--invert .nsw-accordion__item > .nsw-accordion__title::after {
  color: var(--nsw-text-dark);
}

.nsw-section--invert .nsw-accordion__item > .nsw-accordion__title:hover {
  background-color: var(--nsw-brand-light);
  color: var(--nsw-text-dark);
}

.nsw-section--invert .nsw-accordion__item > .nsw-accordion__title:hover::after {
  color: var(--nsw-text-dark);
}

.nsw-section--invert .nsw-accordion__item > .nsw-accordion__title:focus-visible {
  @include nsw.nsw-focus($color: var(--nsw-focus-light));
}

.nsw-section--invert .nsw-accordion__item[open] > .nsw-accordion__title {
  background-color: var(--nsw-brand-light);
  color: var(--nsw-text-dark);
}

.nsw-section--invert .nsw-accordion__item[open] > .nsw-accordion__title::after {
  color: var(--nsw-text-dark);
}