@layer customer {
  .navigation {
    display: none;
  }

  .navigation\/links {
    display: flex;
    flex-direction: column;
    padding: var(--size-2);
    row-gap: var(--size-2);
  }

  .navigation\/link {
    border-radius: var(--radius-1);
    border: solid 1px transparent;
    color: var(--gray-9);
    display: block;
    padding: var(--size-2) var(--size-4);
    transition: background-color 75ms ease-out;

    &:hover {
      background-color: var(--gray-0);
    }
  }

  .navigation\/link\:active {
    background-color: var(--gray-0);
    border-color: var(--gray-3);
    box-shadow: inset 0 1px 5px rgb(0 0 0 / 7%);
  }

  @media (min-width: 640px) {
    .navigation {
      border-right: dashed 1px var(--gray-2);
      display: block;
      flex-grow: 0;
      flex-shrink: 0;
      width: var(--size-13);
    }
  }
}