@use '_helper' as *;

.section-nav {
  margin-top: -60px;
  position: relative;
  z-index: 100;
  overflow: hidden;
  border-radius: 15px;

  @media screen and (min-width: $break-medium) {
    margin-top:-73px;
  }

  @media screen and (min-width: $break-large) {
    margin-top: -103px;
  }

  &__toggle {
    color: $color-white;
    font-weight: 900;
    font-family: $font-dm-sans;
    line-height: 150%;
    text-align: left;
    border: 0;
    background-color: $color-blue;
    padding: 10px 18px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &[aria-expanded="true"] svg {
      transform: rotate(180deg);
    }

    @include focus-light(-4px);

    @media screen and (min-width: $break-large) {
      display: none;

    }
  }

  > ul {
    display: none;

    @media screen and (min-width: $break-large) {
      display: flex !important;
    }
  }

  ul {
    margin: 0;
    padding: 18px;
    background: $color-blue-light;


    @media screen and (min-width: $break-large) {
      padding: 15px 30px;
    }

    ul {
      padding: 0;
      margin-top: 20px;
      font-size: rem(14px);

 
      @media screen and (min-width: $break-medium) {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px 30px;
      }

      .current-page {
        display: inline-block;
        color: $color-black;
        border-radius: 5px;
        padding: 4px 10px;
        margin: 0 -10px;
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        background: rgba(0, 70, 123, 0.10);
      }

      @media screen and (min-width: $break-large) {
        margin-top: 15px;        
      }

      li, a {
        font-size: rem(14px);
        line-height: 1.2;

        @media screen and (min-width: $break-large) {
          font-size: rem(16px);
        }
      }
    }
  }

  >ul>li {
    margin-top: 0;
    width: 100%;
    >a {
      font-weight: 900;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0 7px;

      &.current-page {
        pointer-events: none;

        &:hover {
          transition: none;
        }
        svg {
          display: none;
        }
      } 

      rect {
        fill: $color-blue-dark;

        @media screen and (min-width: $break-large) {
          fill: $color-white;
        }
      }

      path {
        stroke: $color-white;

         @media screen and (min-width: $break-large) {
          stroke: $color-blue-dark;
        }
      }
    
      @media screen and (min-width: $break-large) {
        color: $color-white;
        font-weight: 900;
        font-size: rem(16px);
        font-family: $font-dm-sans;
        line-height: 150%;
        text-align: left;
        border: 0;
        background-color: $color-blue;
        padding: 15px 30px;
        width: calc(100% + 60px);
        margin: -18px -30px 0;     
        
        @include focus-light(-4px);
      }

    }
  }
  li {
    margin-top: 1rem;
    margin-bottom: 0;

    @media screen and (min-width: $break-medium) {
      margin: 0;
    }
  }

  li:before {
    content: none
  }
}