@use "sass:math";
@use "_variables" as *;
@use "_mixins" as *;
@use "_button-mixins" as *;

.menu-container {
  --co-menu-x-padding: 1.5rem;

  z-index: z(menu);
  width: calc(#{$menu-width} - 2rem);
  position: fixed;
  height: calc(100vh - #{pvar(--header-height)});

  @include margin-left(pvar(--menu-margin-left));

  &.collapsed {
    --co-menu-x-padding: 0.25rem;

    width: auto;

    @include margin-left(0);
  }
}

.toggle-menu {
  color: pvar(--menu-fg-300);
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: pvar(--menu-bg-550);

  @include button-with-icon(20px, 0, 0, 1px);

  my-global-icon {
    margin: auto;
  }

  &:hover {
    opacity: 0.8;
  }
}

.menu-container:not(.collapsed) .toggle-menu {
  position: absolute;
  top: 22px;

  @include right(24px);
}

.collapsed .toggle-menu my-global-icon {
  right: -1px;
  top: 0;
}

.main-menu-wrapper {
  // For the scrollbar
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: calc(100% - 75px); // Space for links below the menu
}

.main-menu-scrollbar {
  overflow-y: auto;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  max-height: 100%;

  &:focus,
  &:hover {
    scrollbar-color: auto;
  }

  @media not all and (hover: hover) and (pointer: fine) {
    border-radius: 0;
    scrollbar-color: auto;
  }
}

.main-menu {
  position: relative;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-radius: pvar(--menu-border-radius);
  background-color: pvar(--menu-bg);
}

.menu-link,
.menu-button,
.block-title,
.about .description,
.about .more-info-btn-container {
  @include padding-left(var(--co-menu-x-padding));
  @include padding-right(var(--co-menu-x-padding));
}

.menu-block:not(:last-child),
.logged-in .menu-block,
.collapsed .toggle-menu-container,
.about-top {
  &::after {
    content: "";
    display: block;
    height: 2px;
    margin: 1rem var(--co-menu-x-padding);
    background: pvar(--menu-bg-600);
  }
}

.block-title {
  font-weight: $font-bold;
  color: pvar(--menu-fg-450);
  font-size: 14px;
  margin-bottom: 0.5rem;
  max-width: 180px;

  @include ellipsis;
}

.menu-link {
  display: flex;
  align-items: center;

  white-space: normal;
  word-break: break-word;
  transition: background-color 0.1s ease-in-out;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

  @include disable-default-a-behaviour;

  &:hover,
  &:focus-visible {
    opacity: 1;
    background-color: pvar(--menu-bg-550);
  }

  my-global-icon {
    width: 22px;
    height: 22px;
    line-height: 22px;
    position: relative;
    top: -1px;

    + *:not(.visually-hidden) {
      @include margin-left(12px);
    }
  }
}

.menu-button {
  margin-top: 0.5rem;
}

.about {
  .description {
    font-size: 14px;
    color: pvar(--menu-fg-300);
  }
}

.more-info-btn {
  @include secondary-button(
    $fg: pvar(--menu-fg),
    $active-bg: pvar(--menu-bg-600),
    $hover-bg: pvar(--menu-bg-550),
    $border-color: pvar(--menu-bg-600)
  );

  &.label-xl {
    font-size: 90%;
    padding: pvar(--input-y-padding) calc(#{pvar(--input-x-padding)} / 2) !important;
  }
}

.more-info-btn,
.menu-link {
  my-global-icon {
    color: pvar(--secondary-icon-color);
  }

  &.active {
    font-weight: $font-bold;

    my-global-icon {
      color: pvar(--menu-fg-600);
    }
  }
}

.menu-link {
  color: pvar(--menu-fg);

  &.active {
    background-color: pvar(--menu-bg-600);
  }
}

.powered-by {
  color: pvar(--fg-200);
}

.collapsed {
  .menu-block,
  .toggle-menu-container,
  .about {
    &::after {
      width: 28px;
      margin: 1rem auto;
    }
  }

  .main-menu-wrapper {
    max-height: 100%;
  }

  .main-menu {
    border-start-start-radius: 0;
    border-end-start-radius: 0;

    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .toggle-menu-container {
    text-align: center;
  }

  .menu-link,
  .more-info-btn {
    border: 0 !important;
    justify-content: center;

    &:not(.active) {
      my-global-icon {
        color: pvar(--menu-fg-400);
      }
    }
  }
}

.menu-overlay {
  background-color: #000;
  width: 100vw;
  height: 100vh;
  opacity: 0.75;
  content: "";
  display: none;
  position: fixed;
  z-index: z(overlay);
}

.mobile-controls {
  display: none;
  padding: 0 calc(var(--co-menu-x-padding) - 1rem) 2rem var(--co-menu-x-padding);
  align-items: center;
  justify-content: space-between;

  .icon-logo {
    display: inline-block;
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;

    background-repeat: no-repeat;
    background-size: contain;
  }
}

@media screen and (max-width: $menu-overlay-view) {
  // On small screen use a menu overlay

  .menu-container {
    &:not(.collapsed) {
      --menu-margin-left: 0;

      border-radius: 0;
      background-color: pvar(--menu-bg);
      overflow: auto;

      .main-menu-wrapper {
        height: auto;
        max-height: unset;
      }
    }
  }

  .menu-overlay:not(.menu-collapsed) {
    display: block;
  }
}

@media screen and (max-width: $mobile-view) {
  .menu-container {
    height: 100vh;
    margin-top: calc(#{pvar(--header-height)} * -1);
    z-index: z(root-header) + 1;

    &.collapsed {
      display: none;
    }

    &:not(.collapsed) {
      width: 100vw !important;
    }
  }

  .main-menu {
    padding-top: 0.75rem;
  }

  .menu-overlay {
    display: none !important;
  }

  .mobile-controls {
    display: flex;
  }

  .toggle-menu-container {
    display: none;
  }

  .block-title {
    max-width: 90%;
  }
}
