@use "pix-design-tokens/breakpoints";
@use "pix-design-tokens/typography";

:root {
  --pix-navigation-width:  15rem;
  --pix-navigation-mobile-button-color: --pix-neutral-0;
}

.pix-navigation {
  --bg-color-focus: rgb(var(--pix-neutral-100-inline), 50%);
  --bg-color-active: rgb(var(--pix-neutral-100-inline), 30%);

  display: flex;
  flex-direction: column;
  gap:var(--pix-spacing-6x);
  align-items: stretch;
  justify-content: space-between;
  width: var(--pix-navigation-width);
  min-height: calc(100vh - var(--pix-app-layout-top) - 2 * var(--pix-spacing-6x));
  padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
  color: var(--pix-navigation-text-color);
  background-color: var(--pix-navigation-color);
  border-radius: var(--pix-spacing-6x);
  transition: all 0.3s ease;

  @include breakpoints.device-is('mobile') {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: auto;
    margin-top: 0;
    padding: 0;

    &--opened {
      justify-content: flex-start;
    }
  }

  &--shrunk {
    --pix-navigation-width: 88px;

    transition: all 0.3s ease;

    footer > :not(.navigation-tooltip){
      display: none;
      opacity: 0;
    }
  }

  &__shrunk-container {
    position: relative;
    height: 20px;
  }

  &__brand {
    margin-bottom: 0;
    padding:0;
    line-height: 0;

    img {
      display: block;
      height: 48px;
      margin:0 auto;
    }

    @include breakpoints.device-is('mobile') {
      display:flex;
      flex-direction: row;
      align-items: center;
      padding: var(--pix-spacing-4x) var(--pix-spacing-2x) var(--pix-spacing-4x) var(--pix-spacing-9x);

      img {
        width: 85px;
        height: 32px;
      }

      .pix-navigation--opened & {
        padding-bottom: 0
      }
    }
  }

  &__burger-menu {
    display: none;

    @include breakpoints.device-is('mobile') {
      display: block;
      margin-left:auto;

      svg {
        color: var(--pix-navigation-mobile-button-color);
      }

      .pix-button {
        background-color: transparent;

        &:focus, &:focus-visible {
          background-color: rgb(var(--pix-neutral-800-inline), 20%);
          outline: none;
        }

        &:hover {
          background-color: rgb(var(--pix-neutral-800-inline), 20%);
        }

        &:active {
          background-color: rgb(var(--pix-neutral-800-inline), 30%);
        }

        .pix-button__icon--before {
          margin-right: 0;
        }
      }
    }
  }

  &__nav {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-2x);
    align-self: stretch;

    @include breakpoints.device-is('mobile') {
      display: none;
      padding: 0 var(--pix-spacing-6x);

      .pix-navigation--opened & {
        display: block;
      }
    }


  }

  &__footer {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-2x);
    margin-top: auto;
    padding: 0;
    text-align: center;

    @extend %pix-body-s;

    p {
      word-break: break-word;
    }

    @include breakpoints.device-is('mobile') {
      display: none;

      .pix-navigation--opened & {
        display: flex;
        justify-content: stretch;
        padding: 0 var(--pix-spacing-6x) var(--pix-spacing-4x);

        &::before {
          width: 80px;
          margin: var(--pix-spacing-6x) auto;
          border-top: 1px solid var(--pix-neutral-100);
          content: "";
        }
      }
    }

    .pix-button {
      width: 100%;
      padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
      white-space: unset;

      @include breakpoints.device-is('mobile') {
        width: auto;
      }
    }

    & .pix-button--primary {
      color: var(--pix-navigation-color);
      background-color:var(--pix-navigation-text-color);

      &:hover {
        color: currentcolor;
        background-color: var(--bg-color-focus);
        fill: currentcolor;
      }

      &:focus,
      &:focus-visible {
        color: currentcolor;
        background-color: var(--bg-color-focus);
        outline-color: currentcolor;
      }

      &:active {
        color: currentcolor;
        background-color: var(--bg-color-active);
      }
    }

    & .pix-button--secondary {
      color: currentcolor;
      border-color: currentcolor;

      &:hover {
        color: currentcolor;
        background-color: var(--bg-color-focus);
        fill: currentcolor;
      }

      &:focus,
      &:focus-visible {
        color: currentcolor;
        background-color: var(--bg-color-focus);
        outline-color: currentcolor;
      }

      &:active {
        color: currentcolor;
        background-color: var(--bg-color-active);
      }
    }

    & .pix-button--tertiary {
      padding: 0;
      color: currentcolor;

      &:hover,
      &:focus,
      &:active,
      &:focus-visible {
        color: currentcolor;
      }
    }
  }
}

.pix-navigation-shrunk-button {
  position: absolute;
  left: calc(100% - 4px);
  background-color: var(--pix-neutral-0);
  border: 1px solid var(--pix-primary-900);

  @include breakpoints.device-is('mobile') {
    visibility: hidden;
    opacity: 0;
  }
}