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

.nsw-hero-banner {
  background-color: var(--nsw-white);
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(var(--nsw-black-rgb), 0.1);
  }

  &__container {
    @include nsw.container;
  }

  &__wrapper {
    @include nsw.grid();
  }

  &__content {
    @include nsw.column-default();
    @include nsw.column(7, md);
    @include nsw.column(6, xl);

    h1 {
      text-wrap: pretty;
    }

    @include nsw.breakpoint('xs') { 
      padding-top: nsw.rem(32px);
      padding-bottom: nsw.rem(32px);
    }

    @include nsw.breakpoint('md') { 
      min-height: nsw.rem(260px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @include nsw.breakpoint('lg') { 
      padding-top: nsw.rem(88px);
      padding-bottom: nsw.rem(88px);
    }

    .nsw-hero-banner--wide & {
      @include nsw.column(8, md);
      @include nsw.column(7, xl);      
    } 

    .nsw-hero-banner--featured & {
      @include nsw.breakpoint('md') { 
        min-height: 0;
        display: block;
      }   
    } 

    .nsw-button {
      margin: nsw.rem(24px) 0 0 0;
    }

    .nsw-intro {
      margin: nsw.rem(8px) 0 0 0;
      text-wrap: pretty;

      @include nsw.breakpoint('md') {
        margin-top: nsw.rem(16px);
      }    
    }
  }

  &__links {
    @include nsw.column-default();
    @include nsw.column(4, md);
    @include nsw.column(4, xl, 1);

    @include nsw.breakpoint('xs') { 
      margin-top: nsw.rem(-8px);
      padding-top: 0;
      padding-bottom: nsw.rem(32px);
    }

    @include nsw.breakpoint('md') { 
      margin-top: 0;
      padding-top: nsw.rem(32px);
    }

    @include nsw.breakpoint('lg') { 
      padding-top: nsw.rem(88px);
      padding-bottom: nsw.rem(88px);
    }
  }

  &__list {
    @include nsw.z-index;
    border-left: solid 2px var(--nsw-brand-accent);
    padding-left: nsw.rem(16px);
    position: relative;

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

    li {
      display: block;
      margin-top: nsw.rem(16px);

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

    a:not(.nsw-icon-button) {
      line-height: 1.5;
      padding: nsw.rem(8px) nsw.rem(24px) nsw.rem(8px) 0;
      
      @include nsw.breakpoint('md') {
        padding: nsw.rem(4px) nsw.rem(4px) nsw.rem(4px) 0;
      }
    }
  }

  &__sub-title {
    margin: 0 0 nsw.rem(16px) 0;
    font-weight: var(--nsw-font-bold);
    
    @include nsw.font-size(md);
  }

  &__box {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 41.66667%;
    padding-left: nsw.rem(nsw.$grid-gutters*2);
    overflow: hidden;

    @include nsw.breakpoint('md') {
      display: flex;
    }

    @include nsw.breakpoint('xl') {
      width: 50%;
      padding-left: calc(var(--nsw-container-width)/12 + #{nsw.rem(nsw.$grid-gutters)}*2);
    }
  }

  &__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  &__lines {
    display: none;
    background-color: var(--nsw-brand-light);
    position: relative;

    @include nsw.breakpoint('md') {
      display: block;
      width: 100%;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: nsw.rem(-16px);
      width: nsw.rem(32px);
      background-color: var(--nsw-brand-supplementary);
    }
  }

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

    .nsw-hero-banner__lines {
      background-color: var(--nsw-brand-dark);
    }
  }

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

  &--dark {
    background-color: var(--nsw-brand-dark);

    .nsw-hero-banner__content {
      color: var(--nsw-text-light);
    }

    .nsw-hero-banner__links {
      color: var(--nsw-text-light);

      a {
        @include nsw.link-light;
      }
    }

    .nsw-hero-banner__list {
      border-color: var(--nsw-brand-light);
    }
  }

  &--lines {
    border-bottom: nsw.rem(32px) solid var(--nsw-brand-light);

    @include nsw.breakpoint('md') {
      border: 0;
    }

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

    &::after {
      visibility: hidden;

      @include nsw.breakpoint('md') {
        visibility: visible;
      }
    }

    .nsw-hero-banner__container {
      border-bottom: nsw.rem(16px) solid var(--nsw-brand-supplementary);

      @include nsw.breakpoint('md') {
        border: 0;
      }
    }

    .nsw-hero-banner__box {
      width: 25%;

      @include nsw.breakpoint('xl') {
        width: 50%;
        padding-left: calc(var(--nsw-container-width)/4 + #{nsw.rem(nsw.$grid-gutters)}*2);
      }
    }
  }
}