@use "sass:list";
@use "../mixins/spacing";
@use "../breakpoints";

$link-color-swaps: #9C89B8 #F0A6CA #EFC3E6 #d7c3f6 #b49aff #B8BEDD #F5E6E8 #D5C6E0 #b49aff #AAA1C8 #967AA1 #d7c3f6;
$top-menu-bg-col: rgb(246 246 242);

top-page-menu {
  position: relative;
  left: 0;
  top: 0.5rem;
  display: block;
  transition: background 0.5s ease-out, height 0.5s ease-out;
  background-color: $top-menu-bg-col;
  border-radius: 5px;
  margin-top: 0.5rem;
  height: 3rem;
  padding: 0.5rem;

  nav {
    // empty yet
  }

  & > ul {
    display: none;
  }

  ul {
    position: relative;
    width: 100%;
    padding: 0;
    z-index: 999;
  }

  li {
    padding: 0.5rem;
    margin: 0 2rem;
  }

  a {
    font-weight: bold;
  }

  .link,
  .button {
    // white-space: nowrap;
    display: inline-block;
  }

  a.link {
    display: inline-block;
    padding-left: 1.5rem;
    position: relative;

    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-40%);
      content: "";
      display: inline-block;
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 3px;
      background-color: pink;
    }
  }

  @for $i from 1 through length($link-color-swaps) {
    $color: list.nth($link-color-swaps, $i);

    li:nth-child(#{$i}) a::before {
      background-color: $color;
    }
  }

  a:hover {
    text-decoration: none;
  }

  .button {
    display: block;
    width: 100%;
  }

  &.open {
    height: auto;
    border-bottom: 5px solid #fff;

    ul {
      display: block;
    }
  }

  button[is="nav-button"] {
    position: absolute;
    right: 1rem;
    top: 1.5rem;
    transform: translateY(-50%);
  }

  @include breakpoints.mq-lg($direction: "below") {
    margin-left: 1rem;
    margin-right: 1rem;
    max-height: 85vh;

    &.open {
      padding-bottom: 3rem;
    }

    @include breakpoints.portrait($max-width: 600px) {
      // box-sizing: content-box;
      z-index: 999;
      position: fixed;
      top: auto;
      bottom: 1rem;
      left: 1rem;
      right: 1rem;
      border-top: 5px solid #fff;
      border-bottom: 0;

      // background-color: rgb(249 249 249 / 80%);
    }

    @include breakpoints.portrait($max-width: 600px) {
       button[is="nav-button"] {
        top: 1.3rem;
      }
    }

    @include breakpoints.portrait($max-width: 600px) {
      &.open {
        padding-top: 3rem;
        padding-bottom: 0;
      }
    }
  }

  @include breakpoints.mq-lg($direction: "above") {
    // overflow-y: scroll;
    width: 4rem;
    height: 20rem;
    position: fixed;
    right: 2rem;
    top: 1rem;

    // bottom: 1rem;
    left: auto;
    z-index: 1000;
    margin-top: 0;

    .landing-page & {
      height: 10rem;
    }

    .landing-page.landing-page.main-content-visible & {
      height: 20rem;
    }

    &.open {
      width: 20rem;
      min-height: 90vh;
    }
  }
}

#top-menu-logo {
  width: 100%;
  height: 100%;
}

top-menu-logo-wrapper {
  display: block;
  height: 8rem;
  width: 8rem;
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 65%);
  border: 15px solid #fff;
  background-color: #fff;
  border-radius: 100%;

  .landing-page & {
    display: none;
  }

  @include breakpoints.mq-lg {
    &::before,
    &::after {
      content: "";
      box-sizing: content-box;
      position: absolute;
      width: 15px;
      height: 15px;
      top: 2.2rem;
    }

    &::before {
      left: -1.6rem;
      background: radial-gradient(circle 10px at top left, $top-menu-bg-col 98%, #fff) top left;
    }

    &::after {
      right: -1.6rem;
      background: radial-gradient(circle 10px at top right, $top-menu-bg-col 98%, #fff) top left;
    }

    @include breakpoints.portrait($max-width: 600px) {
      bottom: 1rem;
      transform: translate(-50%, 35%);

      &::before,
      &::after {
        content: "";
        top: 2.25rem;
      }

      &::before {
        background: radial-gradient(circle 10px at bottom left, $top-menu-bg-col 98%, #fff) top left;
      }

      &::after {
        background: radial-gradient(circle 10px at bottom right, $top-menu-bg-col 98%, #fff) top left;
      }
    }

    @include breakpoints.portrait($max-width: 600px) {
       .open & {
        bottom: auto;
        top: -5rem;
        transform: translate(-50%, 0);

        &::before {
          left: -1.2rem;
        }

        &::after {
          right: -1.2rem;
        }

        &::before,
        &::after {
          content: "";
          top: 3.8rem;
        }
      }
    }
  }

  @include breakpoints.mq-lg($direction: "above") {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);

    .open & {
      top: 100%;
      transform: translate(-50%, -60%);

      &::before,
      &::after {
        content: "";
        box-sizing: content-box;
        position: absolute;
        width: 15px;
        height: 15px;
        top: 3.2rem;
      }

      &::before {
        left: -1.5rem;
        background: radial-gradient(circle 10px at top left, $top-menu-bg-col 98%, #fff) top left;
      }

      &::after {
        right: -1.5rem;
        background: radial-gradient(circle 10px at top right, $top-menu-bg-col 98%, #fff) top left;
      }
    }
  }

  .landing-page.main-content-visible & {
    display: inline-block;
  }
}