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

.nsw-link-list {
  @include nsw.component-spacing();

  &__title {
    font-weight: var(--nsw-font-bold);
    padding-bottom: nsw.rem(16px);
    
    @include nsw.font-size('lg');
    
    @include nsw.breakpoint('md') {
      padding-bottom: nsw.rem(24px);
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  li {
    margin: 0;
    border-top: 1px solid var(--nsw-grey-04);

    &:last-child {
      border-bottom: 1px solid var(--nsw-grey-04);
    }
  }

  a {
    padding: nsw.rem(16px);
    color: var(--nsw-brand-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;

    &:hover {
      @include nsw.nsw-hover;
      outline-width: 0;
    }

    &:focus {
      outline-width: 3px;
    }

    span {
      text-decoration: underline;

      span.nsw-material-icons {
        bottom: nsw.rem(-5px);
      }
    }

    .nsw-material-icons {
      text-decoration: none;
      bottom: 0;
    }

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

      &:hover {
        @include nsw.nsw-hover-light;
        outline-width: 0;
      }
    }
  }

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

  .nsw-material-icons {
    font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 20));
    margin-left: nsw.rem(16px);
  }
}