@use 'pix-design-tokens/typography';

.navbar-burger__menu {
  display: flex;
  flex-direction: column;
  min-height: 100%;

  .navbar-burger-menu__list {
    padding: 20px 0;
  }
}

.navbar-burger__menu .navbar-burger-menu {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: var(--pix-spacing-8x);
  }

  &__content {
    flex-grow: 1;
  }

  &__button {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    margin-bottom: 21px;
    padding: 10px var(--pix-spacing-8x);
  }

  &__footer {
    padding: 20px 0;
    background-color: var(--pix-primary-500);
  }
}

.navbar-burger-menu-list-item {
  &__link {
    @extend %pix-body-l;

    display: inline-block;
    width: 100%;
    padding: var(--pix-spacing-3x) var(--pix-spacing-8x);
    color: var(--pix-neutral-800);

    &.active {
      --border-width: 5px;

      padding-left: calc(var(--pix-spacing-8x) - var(--border-width));
      color: var(--pix-primary-500);
      border-left: var(--border-width) solid var(--pix-primary-500);
    }

    &:hover {
      color: var(--pix-primary-700);
      background-color: var(--pix-neutral-20);
    }

    &:active {
      color: var(--pix-primary-700);
      background-color: var(--pix-neutral-20);
    }
  }
}

.navbar-burger-menu-footer {
  &__list {
    margin: 0;
    padding-left: 0;
  }
}

.navbar-burger-menu-footer-item {
  &__link {
    @extend %pix-body-m;

    display: inline-block;
    width: 100%;
    padding: 10px var(--pix-spacing-8x);
    color: var(--pix-neutral-0);

    &.active {
      --border-width: 5px;

      padding-left: calc(var(--pix-spacing-8x) - var(--border-width));
      border-left: var(--border-width) solid var(--pix-neutral-0);
    }

    &:hover {
      background-color: var(--pix-primary-700);
    }

    &:active {
      background-color: var(--pix-primary-700);
    }

    &--logout {
      display: flex;
      align-items: center;
      margin-top: var(--pix-spacing-2x);
    }
  }
}

.navbar-burger-menu-footer-list-item-logout {
  &__icon {
    width: 1rem;
    height: 1rem;
    margin-right: var(--pix-spacing-1x);
  }
}
