@use 'functions/color' as *;
@use 'functions/get-var' as *;
@use 'functions/var-negative' as *;
@use 'mixins/shadow' as *;
@use 'variables' as *;

// Menus
.menu {
  @include shadow-variant(0.05rem);
  // background: $bg-color-light; // old spectre.css
  background: color('bg-color-light');
  // border-radius: $border-radius; // old spectre.css
  border-radius: get-var('border-radius');
  list-style: none;
  margin: 0;
  // min-width: $control-width-xs; // old spectre.css
  min-width: get-var('control-width', $suffix: 'xs');
  // padding: $unit-2; // old spectre.css
  padding: get-var('unit-2');
  // transform: translateY($layout-spacing-sm); // old spectre.css
  transform: translateY(get-var('layout-spacing', $suffix: 'sm', $unit: 1));
  // z-index: $zindex-3; // old spectre.css
  z-index: get-var('z-index-3');

  &.menu-nav {
    background: transparent;
    box-shadow: none;
  }

  .menu-item {
    margin-top: 0;
    // padding: 0 $unit-2; // old spectre.css
    padding: 0 get-var('unit-2');
    position: relative;
    text-decoration: none;

    & > a {
      // border-radius: $border-radius; // old spectre.css
      border-radius: get-var('border-radius');
      color: inherit;
      display: block;
      // margin: 0 (-$unit-2); // old spectre.css
      margin: 0 var-negative(get-var('unit-2'));
      // padding: $unit-1 $unit-2; // old spectre.css
      padding: get-var('unit-1') get-var('unit-2');
      text-decoration: none;
      &:focus,
      &:hover {
        // background: $secondary-color; // old spectre.css
        background: color('secondary-color');
        // color: $primary-color; // old spectre.css
        color: color('primary-color');
      }
      &:active,
      &.active {
        // background: $secondary-color; // old spectre.css
        background: color('secondary-color');
        // color: $primary-color; // old spectre.css
        color: color('primary-color');
      }
    }

    .form-checkbox,
    .form-radio,
    .form-switch {
      // margin: $unit-h 0; // old spectre.css
      margin: get-var('unit-h') 0;
    }

    & + .menu-item {
      // margin-top: $unit-1; // old spectre.css
      margin-top: get-var('unit-1');
    }
  }

  .menu-badge {
    align-items: center;
    display: flex;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;

    .label {
      // margin-right: $unit-2; // old spectre.scss
      margin-right: get-var('unit-2');
    }
  }
}