@use '../../global/scss/tools' as nsw;

.nsw-form {
  &__select {
    padding: nsw.rem(11px) nsw.rem(16px);
    border-radius: var(--nsw-border-radius);
    background-color: var(--nsw-white);
    color: var(--nsw-text-dark);
    border: 1px solid var(--nsw-grey-01);
    vertical-align: middle;
    appearance: none;
    width: 100%;
    padding-right: nsw.rem(48px);
    background: var(--nsw-white) nsw.svg-url(nsw.$nsw-form-chevron-down) no-repeat right nsw.rem(16px) center;
    background-size: nsw.rem(16px) auto;
    cursor: pointer;

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

    &:hover:not(.nsw-multi-select__button) {
      background: nsw.svg-url(nsw.$nsw-form-chevron-down) no-repeat right nsw.rem(16px) center, linear-gradient(var(--nsw-hover), var(--nsw-hover));
      background-size: nsw.rem(16px) auto, auto;
      background-color: var(--nsw-white);
    }

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

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

    &:disabled,
    &[readonly='true'] {
      background: var(--nsw-off-white) nsw.svg-url(nsw.$nsw-form-chevron-down) no-repeat right nsw.rem(16px) center;
      background-size: nsw.rem(16px) auto;
      border-color: var(--nsw-grey-03);
      color: var(--nsw-grey-01);
      cursor: not-allowed;
      opacity: 1;
      
      &:hover {
        background: var(--nsw-off-white) nsw.svg-url(nsw.$nsw-form-chevron-down) no-repeat right nsw.rem(16px) center;
        background-size: nsw.rem(16px) auto, auto;
        background-color: var(--nsw-off-white);
      }
    }

    &[aria-invalid='true'],
    &.has-error {
      border-color: var(--nsw-status-error);
      border-width: 2px;

      &:hover {
        background: var(--nsw-status-error-bg) nsw.svg-url(nsw.$nsw-form-chevron-down) no-repeat right nsw.rem(16px) center;
        background-size: nsw.rem(16px) auto;
      }
    }

    option {
      background-color: var(--nsw-white);
    }
  }

  &__label {
    + .nsw-multi-select {
      margin-top: 0.35rem;
    }
  }
}

.nsw-multi-select {
  position: relative;

  &__button {
    text-align: left;
    background: var(--nsw-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 0.5rem;

    .nsw-material-icons {
      font-size: nsw.rem(32px);
      line-height: 0.8;
      transform: rotate(0deg);
      transition: transform nsw.$nsw-transition-duration, color nsw.$nsw-transition-duration;
      width: 2rem;
    }

    &:hover {
      background: linear-gradient(var(--nsw-hover), var(--nsw-hover));
      background-color: var(--nsw-white);
    }

    &[aria-invalid='true'],
    &.has-error {
      border-color: var(--nsw-status-error);
      border-width: 2px;

      &:hover {
        background: var(--nsw-status-error-bg);
        background-size: revert;
      }
    }

    &[aria-expanded='true'] {
      + .nsw-multi-select__dropdown {
        visibility: visible;
        opacity: 1;
        transition: visibility 0s, opacity 0.2s;
      }

      .nsw-material-icons {
        transform: rotate(180deg);
      }
    }
  }

  &__clear-all-button {
    margin-top: nsw.rem(20px);
    text-decoration: underline;
    cursor: pointer;
    background: 0;
    border: 0;
    padding: nsw.rem(4px) nsw.rem(4px) nsw.rem(4px) 0;

    @include nsw.link;
    @include nsw.font-size('sm');
  
    &:focus {
      @include nsw.nsw-focus;
    }
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;

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

    > li {
      &:first-child {
        margin-top: 0;
      }
    }

    &:not(:first-of-type) {
      padding-top: 0.25rem;
    }
    
    &:not(:last-of-type) {
      padding-bottom: 0.25rem;
    }
  }

  &__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  &__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    min-width: nsw.rem(200px);
    max-height: 1px;
    background-color: var(--nsw-white);
    box-shadow: var(--nsw-box-shadow);
    padding: 1rem;
    border-radius: 0.25em;
    z-index: 5;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s;

    .nsw-section--invert & {
      .nsw-form__checkbox-input:focus + .nsw-form__checkbox-label::before {
        @include nsw.nsw-focus;
      }
    }

    &--right {
      right: 0;
      left: auto;
    }
    
    &--up {
      bottom: 100%;
      top: auto;
    }
  }

  &__term {
    + .nsw-multi-select__details::before {
      content: ': ';
    }
  }

  &__all {
    padding: nsw.rem(4px) 0 nsw.rem(4px) nsw.rem(48px);
    min-height: nsw.rem(32px);
    display: block;
    position: relative;
    border: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
    width: 100%;
    text-align: left;

    @include nsw.font-size('sm');
  
    &:focus {
      border: 0;
      outline: 0;
    }
  
    &::before {
      content: '';
      width: nsw.rem(32px);
      height: nsw.rem(32px);
      margin-right: nsw.rem(16px);
      border: 1px var(--nsw-grey-01) solid;
      border-radius: var(--nsw-border-radius);
      background-color: var(--nsw-white);
      top: 0;
      left: 0;
      display: inline-block;
      vertical-align: middle;
      position: absolute;
    }
  
    &::after {
      content: '';
      position: absolute;
      width: nsw.rem(22px);
      height: nsw.rem(22px);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: nsw.rem(16px) auto;
      left: nsw.rem(5px);
      top: nsw.rem(5px);
    }
  
    &:focus::before {
      @include nsw.nsw-focus;
    }

    &:hover::before {
      background-image: linear-gradient(var(--nsw-hover), var(--nsw-hover));
    }
  
    &.active {
      &:hover::before {
        background-image: linear-gradient(var(--nsw-hover), var(--nsw-hover));
      }
  
      &::after {
        background-image: nsw.svg-url(nsw.$nsw-form-tick);
        background-color: var(--nsw-brand-dark);
      }
  
      &:disabled {
        cursor: not-allowed;
  
        &::before,
        &::before {
          border-color: var(--nsw-grey-03);
          background-color: var(--nsw-off-white);
        }
  
        &::after,
        &::after {
          background-color: var(--nsw-grey-03);
        }
      }
  
      &[aria-invalid='true'],
      &.has-error {
        &:hover::before {
          background-image: linear-gradient(var(--nsw-status-error-bg), var(--nsw-status-error-bg));
        }
  
        &::before {
          border-width: 2px;
          border-color: var(--nsw-status-error);
        }
      }
    }
  }
}