@use "../../variables/units";
@use "../../variables/scaffolding";
@use "../../variables/colors";
@use "../../variables/media-query-breakpoints";

@use "./navbar.mixins" as navbar;

@include navbar.root();

.dso-navbar {
  @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {
    clear: inline-start;

    > .dso-nav {
      clear: both;
    }

    &:not(.dso-open) {
      > .dso-nav {
        display: none;

        &.dso-nav-sub {
          display: block;
        }
      }
    }
  }

  & + .dso-navbar-extension {
    position: relative;
    isolation: isolate;

    &.dso-animate {
      .dso-navbar-extension-container {
        transition:
          grid-template-rows 0.5s,
          visibility 0.5s,
          margin-block-end 0.5s;
      }
    }

    .dso-navbar-extension-container {
      position: relative;
      inset-block-start: -1px;

      display: grid;
      grid-template-rows: 0fr;

      margin-block-end: 0;

      visibility: hidden;

      inline-size: 100%;
    }

    .dso-navbar-extension-expand-button {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 1px;
      z-index: 1;

      translate: 0 -100%;

      background-color: transparent;

      padding-inline: units.$u2;
      padding-block: 6px;

      border: 2px solid transparent;
      border-start-start-radius: scaffolding.$border-radius-base;
      border-start-end-radius: scaffolding.$border-radius-base;

      font-weight: 600;
      color: colors.$grasgroen;

      dso-icon {
        margin-inline-end: units.$u1;
      }

      &:hover,
      &:focus {
        text-decoration: underline;
      }

      &.dso-active {
        background-color: colors.$grijs-5;

        border-color: colors.$grijs-20;

        color: colors.$grijs-90;

        &::after {
          content: "";

          position: absolute;
          inset-inline-start: 0;
          inset-block-end: -2px;

          inline-size: 100%;
          block-size: 2px;

          background-color: colors.$grijs-5;
        }

        + .dso-navbar-extension-container {
          visibility: visible;

          grid-template-rows: 1fr;

          margin-block-end: units.$u1;

          .dso-navbar-extension-content {
            border: 2px solid colors.$grijs-20;
          }
        }
      }
    }

    .dso-navbar-extension-content {
      overflow: hidden;

      padding-inline: units.$u2;
      padding-block: units.$u1;

      background-color: colors.$grijs-5;

      border-start-start-radius: scaffolding.$border-radius-base;
      border-end-end-radius: scaffolding.$border-radius-base;
      border-end-start-radius: scaffolding.$border-radius-base;
    }
  }
}

.dso-nav {
  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {
    @include navbar.nav-border();
  }

  &.dso-nav-main {
    > li {
      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {
        display: block;
      }
    }
  }
}