@use "system/breakpoints";
@use "system/colors";
@use "system/icon-map";
@use "system/spacing";
@use "system/typography";
@use "system/icons";
@use "system/units";
@use "system/visibility";
@use "components/links/link/mixins";
@use "sass:math";
@use "sass:map";

.ods-button-menu {
  @extend %ods-padding-2, %ods-padding-horizontal-4-breakpoint-large;
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
  @extend %ods-text--weight-medium;

  background-color: transparent;
  border-radius: 50%;
  border: 0.125rem solid transparent;
  box-sizing: content-box;
  color: colors.$blue-dark;
  cursor: pointer;
  display: inline-block;
  height: 1.5rem;
  font-family: inherit;
  outline: none;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 1.5rem;

  @include breakpoints.medium {
    border-radius: 0;
    border: 0.125rem solid colors.$blue-dark;
    padding-left: units.unit-to-rem(4);
    padding-right: units.unit-to-rem(4);
    width: unset;
  }

  @include breakpoints.large {
    height: 1.75rem;
  }

  &__text {
    @extend %ods-sr-only;

    pointer-events: none;

    @include breakpoints.medium {
      border: unset !important;
      clip: unset !important;
      height: unset !important;
      overflow: unset !important;
      padding: unset !important;
      position: unset !important;
      white-space: unset !important;
      width: unset !important;
    }
  }

  &__icon {
    @extend %ods-text--size-hotel, %ods-text--size-golf-breakpoint-large;
    @extend %ods-margin-left-3-breakpoint-large;

    line-height: 1.5rem;

    @include breakpoints.medium {
      margin-left: units.unit-to-rem(1);
    }

    @include breakpoints.large {
      line-height: 1.75rem;
    }

    display: inline-block;
    vertical-align: top;

    &::before {
      font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
      content: map.get(icon-map.$icons, "menu") !important;
    }
  }

  &:active,
  &:focus,
  &:hover {
    background-color: colors.$gray;
    color: colors.$blue-state;

    @include breakpoints.medium {
      border-color: colors.$blue-state;
      background-color: transparent;

      & .ods-button-menu__text {
        text-decoration: underline;
      }
    }
  }

  &--open {
    background-color: colors.$blue-state;
    border-color: colors.$blue-state;
    color: colors.$white;

    &:active,
    &:focus,
    &:hover {
      background-color: colors.$blue-state;
      border-color: colors.$blue-state;
      color: colors.$white;
    }

    & .ods-button-menu__icon {
      &::before {
        content: map.get(icon-map.$icons, "close") !important;
      }
    }
  }
}

.ods-navbar-menu {
  @extend %ods-padding-bottom-8, %ods-padding-bottom-0-breakpoint-medium;

  background-color: colors.$white;
  display: none;

  .ods-icon {
    @extend %ods-icon--size-juliett, %ods-icon--size-golf-breakpoint-medium;
  }

  &__heading-collapsable {
    @extend %ods-text--size-juliett;
    @include typography.weight("medium");
    @extend %ods-text--weight-medium;
    @extend %ods-padding-horizontal-0;
    @extend %ods-padding-left-4;
    @extend %ods-padding-bottom-0;
    @extend %ods-none-breakpoint-medium;

    background-color: unset;
    border: none;
    color: colors.$blue-dark;
    cursor: pointer;

    span {
      pointer-events: none;
      vertical-align: middle;
    }
  }

  &__heading {
    @extend %ods-none, %ods-block-breakpoint-medium;
    @extend %ods-text--size-juliett, %ods-text--size-india-breakpoint-medium, %ods-text--size-hotel-breakpoint-large;
    @include typography.weight("medium");
  }

  &__list-animate {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;

    @include breakpoints.medium {
      max-height: unset;
      overflow: visible;
      visibility: visible;
    }

    ul {
      @extend %ods-padding-left-4, %ods-padding-left-0-breakpoint-medium, %ods-padding-bottom-4, %ods-padding-bottom-0-breakpoint-medium;
    }

    &--open {
      visibility: visible;
      max-height: 695px;
      transition: all 0.7s ease;

      ul {
        @extend %ods-padding-top-4, %ods-padding-bottom-4, %ods-margin-top-4;

        @include breakpoints.medium {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }

        li {
          @extend %ods-margin-left-0, %ods-margin-bottom-0;
        }

        li:first-child {
          @extend %ods-padding-top-0;
        }
      }
    }

    &--close {
      max-height: 0;
      visibility: hidden;
      transition: all 0.7s ease;

      @include breakpoints.medium {
        max-height: unset;
        visibility: visible;
      }
    }
  }

  &__link {
    color: inherit;
    display: flex;
    font-size: inherit;
    flex-direction: row;
    text-decoration: none;

    &:focus-visible {
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }

    @include mixins.states {
      .ods-navbar-menu__link-content .ods-navbar-menu__link-text {
        text-decoration: underline;
      }
    }
  }

  &__link-icon {
    @extend %ods-margin-right-1;
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;

    display: flex;
    align-items: center;
  }

  &__link-text {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large, %ods-text--weight-light;

    display: inline-block;
  }

  &__services {
    @extend %ods-padding-top-8, %ods-padding-bottom-4, %ods-padding-horizontal-0;
    @extend %ods-padding-13-breakpoint-medium;
  }

  &__services-list {
    @extend %ods-padding-left-4;
    @extend %ods-padding-vertical-0;
    @extend %ods-margin-top-8-breakpoint-medium;
    @extend %ods-padding-0-breakpoint-medium;

    background-color: colors.$gray;

    @include breakpoints.medium {
      background-color: unset;
      hyphens: auto;
      flex-wrap: wrap;
      padding-left: 0 !important;
    }

    .ods-navbar-menu__link {
      align-items: center;
    }

    li:first-child {
      @extend %ods-padding-top-4, %ods-padding-top-0-breakpoint-medium;
    }

    li:last-child {
      @extend %ods-margin-bottom-3;

      @include breakpoints.medium {
        margin-bottom: unset;
      }
    }

    &.ods-navbar-menu__list-animate--open {
      @extend %ods-padding-top-4, %ods-padding-bottom-4, %ods-margin-top-4;

      @include breakpoints.medium {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }

      li {
        @extend %ods-margin-left-0, %ods-margin-bottom-0;
      }

      li:first-child {
        @extend %ods-padding-top-0;
      }
    }
  }

  &__my-page {
    padding: 0 3.25rem 2rem;

    &--mobile {
      display: block;

      @include breakpoints.medium {
        display: none !important;
      }
    }
  }

  &__categories {
    @extend %ods-padding-horizontal-0;
    @extend %ods-padding-vertical-13-breakpoint-medium, %ods-padding-horizontal-13-breakpoint-medium;

    @include breakpoints.medium {
      margin-left: 0;
    }

    ul {
      @extend %ods-margin-top-4-breakpoint-medium;

      background-color: colors.$gray;

      li {
        @extend %ods-margin-left-3;
        @extend %ods-margin-left-0-breakpoint-medium;
        @extend %ods-padding-top-4;
      }
    }

    & .ods-navbar-menu__link-text {
      text-decoration: underline;
    }

    .ods-navbar-menu__link {
      @include breakpoints.medium {
        margin-left: 0 !important;
      }
    }

    @include breakpoints.medium {
      background-color: colors.$gray;
    }
  }

  &__footer {
    @extend %ods-padding-vertical-8-breakpoint-medium, %ods-padding-horizontal-13-breakpoint-medium;

    align-items: center;

    li {
      @extend %ods-padding-top-4;

      @include breakpoints.medium {
        padding-top: 0 !important;
      }
    }
  }

  &__footer-list {
    @extend %ods-margin-top-0-breakpoint-medium, %ods-padding-left-4, %ods-padding-left-0-breakpoint-medium;

    justify-content: flex-start;

    @include breakpoints.medium {
      margin-left: 0 !important;
    }

    &--media {
      display: flex;
      @extend %ods-margin-top-4;
      @extend %ods-margin-top-0-breakpoint-medium;

      @include breakpoints.medium {
        justify-content: flex-end;
      }

      & .ods-navbar-menu__link-content {
        @extend %ods-padding-right-4, %ods-padding-right-0-breakpoint-medium, %ods-padding-left-6-breakpoint-medium;
      }

      .ods-icon {
        font-size: 1.5rem;
        margin-right: 0;

        @include breakpoints.large {
          font-size: 1.75rem;
        }
      }
    }
  }
}