landing_page/qdrant-landing/themes/qdrant-2024/assets/css/partials/_menu-mobile.scss

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

.menu-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding-top: pxToRem(12);
  background-color: $neutral-94;
  display: none;
  gap: $spacer * 3;
  flex-direction: column;
  overflow-y: scroll;

  &--visible {
    display: flex;
  }

  &__header {
    padding: 0 pxToRem(20);

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__close {
    outline: none;
    border: none;
    padding: pxToRem(5);
    padding-top: pxToRem(7);
    width: pxToRem(40);
    height: pxToRem(40);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__close svg {
    width: pxToRem(24);
    height: pxToRem(24);
  }

  &__controls {
    display: flex;
    flex-direction: column;
    gap: $spacer * 1.5;

    padding-left: pxToRem(20);
    padding-right: pxToRem(20);
    padding-bottom: pxToRem(60);
  }

  &__login {
    color: $neutral-20 !important;
  }

  &__items {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &__item {
    width: 100%;
    border-bottom: 1px solid $neutral-90;

    display: flex;
    flex-direction: column;

    font-size: pxToRem(18);
    line-height: pxToRem(27);

    color: $neutral-20;

    a {
      color: $neutral-20;
    }
  }

  &__item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: pxToRem(64);
    padding: 0 pxToRem(20);
  }

  &__subitems {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: $neutral-90;
    padding: $spacer pxToRem(20);
  }

  &__subitems a {
    text-decoration: none;
  }

  &__subitem {
    display: flex;
    align-items: center;

    min-height: pxToRem(40);

    font-size: pxToRem(16);
    line-height: pxToRem(24);
    color: $neutral-20;
  }

  &__subitem span {
    width: pxToRem(16);
    height: pxToRem(16);
    margin-right: $spacer;
  }

  &__expand {
    outline: none;
    border: none;
    padding: pxToRem(5);
    width: pxToRem(34);
    height: pxToRem(34);
    background-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__expand svg {
    height: pxToRem(16);
    width: pxToRem(16);
  }

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

.menu-mobile__item--active {
  .menu-mobile__subitems {
    display: block;
  }

  .menu-mobile__expand svg {
    transform: rotate(180deg);
  }
}