/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../styling/defs.scss' as bk;

@layer baklava.components {
  .bk-nav {
    @include bk.component-base(bk-nav);
    
    --bk-nav-inset: var(--bk-app-layout-sidebar-inset, #{bk.$spacing-4});
    
    menu {
      display: flex;
      flex-direction: column;
      row-gap: bk.$spacing-3;
      
      > hr {
        margin-block: 0;
      }
      
      .bk-nav__item {
        --bk-nav-item-border-size: #{bk.$spacing-1};
        
        @include bk.font(bk.$font-family-body, $size: bk.$font-size-m);
        
        .bk-nav__item__link {
          cursor: pointer;
          
          // Make space for the left border when in active state
          border-inline-start: var(--bk-nav-item-border-size) solid transparent;
          
          // Break out of the sidebar padding to extend to the edges (for hover/active states)
          margin-inline: calc(-1 * var(--bk-nav-inset));
          padding-inline: var(--bk-nav-inset);
          padding-inline-start: calc(var(--bk-nav-inset) - var(--bk-nav-item-border-size));
          padding-block: bk.$spacing-2;
          
          @include bk.focus-inset;
          &:not(.bk-nav__item__link--disabled) {
            &:hover, &:focus-visible {
              background: bk.$theme-side-nav-menu-background-hover;
            }
          }
          
          &.bk-nav__item__link--disabled {
            opacity: 0.6;
          }
          
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: bk.$spacing-2;
          
          .bk-nav__item__link__icon { --keep: ; }
          .bk-nav__item__link__label {
            @include bk.text-one-line;
          }
        }
        &[aria-current] {
          .bk-nav__item__link {
            background: bk.$theme-side-nav-menu-background-hover;
            border-inline-start-color: bk.$theme-side-nav-menu-tab-default;
            font-weight: bk.$font-weight-semibold;
          }
        }
      }
    }
  }
}
