@charset "UTF-8";

// ---------------------------------------------------------- //
// Mechanics(behavior)
// ---------------------------------------------------------- //

.navigation {
  position: relative;

  // Hiding the checkbox
  &__state-control {
    display: none;
    appearance: none;
    opacity: 0;
  }

  // Show the menu if the burger is clicked
  // input ~ &__panel,
  &__state-control:checked ~ &__panel {
    visibility: visible;
    opacity: 1;

    &--left {
      transform: translateX($navigation-panel-max-width);
    }

    &--right {
      transform: translateX(-$navigation-panel-max-width);
    }
  }

  &__panel {
    visibility: hidden;
    display: block;
    position: fixed;
    top: 0px;
    z-index: 1000;

    will-change: transform, opacity;
    opacity: 0;

    transition-property: transform, opacity, visibility;
    transition-duration: $navigation-panel-transition-duration;
    transition-timing-function: ease-in-out;

    &--left {
      left: -$navigation-panel-max-width;
      transform: translateX(0);
    }

    &--right {
      right: -$navigation-panel-max-width;
      transform: translateX(0);
    }
  }

}