@use '../mixins/mixins' as mixins;
@use '../helpers/functions' as *;

.menu-link {
  text-decoration: none;
  color: $neutral-98;
  cursor: pointer;

  &:hover,
  &.active {
    color: $primary-50;
  }
}

.main-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-shrink: 0;
  position: relative;
  padding-top: pxToRem(12);
  padding-bottom: pxToRem(12);
  padding-left: pxToRem(20);
  padding-right: pxToRem(20);
  background: linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0));
  z-index: 1;

  &__trigger {
    outline: none;
    border: none;
    width: pxToRem(40);
    height: pxToRem(40);
    padding: 0 8px;
    border-radius: 8px;
    z-index: 1;
    background: linear-gradient($neutral-20, #0e1424);
  }

  &__links {
    display: none;
    gap: calc($spacer / 2);
    position: relative;
    margin-bottom: 0;
  }

  &__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin: 0 $spacer;
    position: relative;
    color: $neutral-98;
    line-height: 1.5;
    white-space: nowrap;
    @include mixins.transitionAll(300ms);

    &:hover {
      .main-menu__submenu {
        display: flex;
      }
    }
  }

  &__submenu {
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: pxToRem(24);
    position: absolute;

    border-radius: 12px;
    border: 1px solid $neutral-90;
    background: $neutral-98;
    box-shadow:
      0 1px 2px 0 rgba(22, 30, 51, 0.1),
      0 10px 20px 0 rgba(22, 30, 51, 0.1);
    top: 48px;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: -7px;
      left: 50%;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid $neutral-98;
      transform: translateX(-50%);
    }

    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 30px;
      top: -30px;
      left: 0;
    }
  }

  &__submenu-item {
    width: 100%;
    list-style: none;
    margin-bottom: pxToRem(4);
    &:last-of-type {
      margin-bottom: 0;
    }
    & a {
      display: flex;
      height: 2.5rem;
      line-height: 1;
      align-items: center;
      border-radius: pxToRem(4);
      color: $neutral-20;
      padding: 0.5rem;
    }
    img {
      display: block;
      width: auto;
      height: 1rem;
      color: $primary-50;
      margin-top: 0.3rem;
      margin-bottom: 0.2rem;
      margin-right: pxToRem(12);
    }

    &:hover {
      a {
        background: $neutral-94;
        color: $primary-50;
      }
    }
  }

  &__section-link {
    padding: 0.5rem;
    margin-bottom: pxToRem(4);
    text-transform: uppercase;
    a {
      line-height: $font-size-s;
    }
  }

  &__buttons {
    display: none;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: $spacer;
  }
}

@include media-breakpoint-up(xl) {
  .main-menu {
    padding-top: $spacer * 2;
    padding-bottom: $spacer * 2;
    padding-left: $spacer * 1.5;
    padding-right: $spacer * 1.5;

    &__links {
      display: flex;
    }

    &__buttons {
      display: flex;
    }

    &__trigger {
      display: none;
    }
  }
}