// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:list";
@use "sass:map";
@import "../../common/mixins";
@import "../../common/variables";
@import "../../common/variables-extended";

$menu-item-border-radius: $pt-border-radius !default;

// Set line-height of menu items to be a multiple of the font size. This is
// needed because if the line-height does not extend far enough past the font's
// baseline, clipping will occur when the .#{$ns}-text-overflow-ellipsis class is
// applied to it (#2177). Also, line-height should be an even value, or content
// will be misaligned by one pixel (Chrome quirk).
$menu-item-line-height-factor: 1.4;
$menu-item-line-height-small: 20px;
$menu-item-line-height: 22px;
$menu-item-line-height-large: 22px;

$menu-min-width: $pt-spacing * 45 !default;
$menu-item-padding: $pt-spacing * 2 !default;
$menu-item-padding-large: $pt-spacing * 2 !default;
$menu-item-padding-vertical: $pt-spacing !default;
$menu-item-padding-vertical-large: $pt-spacing * 2.25 !default;
$menu-item-padding-small: $pt-spacing !default;
$menu-item-padding-vertical-small: $pt-spacing * 0.5 !default;
$menu-item-selected-icon-spacing: $pt-spacing * 0.5;
$menu-item-indent: $pt-icon-size-standard + $menu-item-selected-icon-spacing * 2;

$menu-background-color: $white !default;
$dark-menu-background-color: $dark-gray3 !default;

$menu-item-color-hover: rgba($gray3, 0.15) !default;
$menu-item-color-active: rgba($gray3, 0.3) !default;

$menu-item-intent-colors: (
  "primary": (
    /* bg */ $blue3,
    /* fg */ $blue2,
    /* fg active */ $blue1,
  ),
  "success": (
    /* bg */ $green3,
    /* fg */ $green2,
    /* fg active */ $green1,
  ),
  "warning": (
    /* bg */ $orange3,
    /* fg */ $orange2,
    /* fg active */ $orange1,
  ),
  "danger": (
    /* bg */ $red3,
    /* fg */ $red2,
    /* fg active */ $red1,
  ),
) !default;

$dark-menu-item-intent-colors: (
  "primary": (
    /* bg */ $blue3,
    /* fg */ $blue5,
    /* fg active */ $blue6,
  ),
  "success": (
    /* bg */ $green3,
    /* fg */ $green5,
    /* fg active */ $green6,
  ),
  "warning": (
    /* bg */ $orange3,
    /* fg */ $orange5,
    /* fg active */ $orange6,
  ),
  "danger": (
    /* bg */ $red3,
    /* fg */ $red5,
    /* fg active */ $red6,
  ),
) !default;

@mixin menu-item() {
  @include pt-flex-container(row, $menu-item-padding);
  align-items: flex-start;
  border-radius: $menu-item-border-radius;
  color: inherit;
  line-height: $menu-item-line-height;
  padding: $menu-item-padding-vertical $menu-item-padding;
  text-decoration: none;
  user-select: none;

  > .#{$ns}-fill {
    word-break: break-word;
  }

  .#{$ns}-menu-item-icon {
    display: flex;
    flex-direction: column;
    height: $menu-item-line-height;
    justify-content: center;
  }

  .#{$ns}-menu-item-label {
    color: $pt-text-color-muted;
  }

  &::before,
  .#{$ns}-menu-item-icon,
  .#{$ns}-menu-item-selected-icon,
  .#{$ns}-submenu-icon {
    color: $pt-icon-color;
  }

  &::before,
  .#{$ns}-submenu-icon {
    margin-top: ($menu-item-line-height - $pt-icon-size-standard) * 0.5;
  }

  &:hover {
    @include menu-item-hover;
  }

  // N.B. mouse interaction :active appearance is different from the .#{$ns}-active modifier class.
  // The latter is often used to indicate keyboard navigation, and it's helpful to distinguish between keyboard
  // and mouse interactions.
  &:active {
    background-color: $menu-item-color-active;

    .#{$ns}-menu-item-label {
      color: $pt-text-color;
    }
  }

  &.#{$ns}-active {
    @include menu-item-active(false);
  }

  &.#{$ns}-menu-item-is-selectable {
    padding-left: $menu-item-indent;

    &.#{$ns}-selected {
      padding-left: 0;
    }

    .#{$ns}-menu-item-selected-icon {
      align-self: center;
      margin: 0 $menu-item-selected-icon-spacing;
    }
  }

  // disabled class needs to always overrides other styles
  /* stylelint-disable declaration-no-important */
  &.#{$ns}-disabled {
    background-color: inherit !important;
    color: $pt-text-color-disabled !important;
    cursor: not-allowed !important;
    // override global a:focus styles
    outline: none !important;

    &::before,
    .#{$ns}-menu-item-icon,
    .#{$ns}-submenu-icon {
      color: $pt-icon-color-disabled !important;
    }

    .#{$ns}-menu-item-label {
      color: $pt-text-color-disabled !important;
    }
  }
  /* stylelint-enable declaration-no-important */
}

@mixin dark-menu-item() {
  color: inherit;

  .#{$ns}-menu-item-label {
    color: $pt-dark-text-color-muted;
  }

  &::before,
  .#{$ns}-menu-item-icon,
  .#{$ns}-menu-item-selected-icon,
  .#{$ns}-submenu-icon {
    color: $pt-dark-icon-color;
  }

  &:hover {
    @include dark-menu-item-hover;
  }

  // N.B. mouse interaction :active appearance is different from the .#{$ns}-active modifier class.
  &:active {
    // we can use the same color as light theme due to transparency
    background-color: $menu-item-color-active;

    .#{$ns}-menu-item-label {
      color: $pt-dark-text-color;
    }
  }

  &.#{$ns}-active {
    @include menu-item-active(true);
  }

  // pt-disable always overrides over styles
  /* stylelint-disable declaration-no-important */
  &.#{$ns}-disabled {
    color: $pt-dark-text-color-disabled !important;

    &::before,
    .#{$ns}-menu-item-icon,
    .#{$ns}-submenu-icon {
      color: $pt-dark-icon-color-disabled !important;
    }

    .#{$ns}-menu-item-label {
      color: $pt-dark-text-color-disabled !important;
    }
  }
  /* stylelint-enable declaration-no-important */
}

@mixin menu-item-hover() {
  background-color: $menu-item-color-hover;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

@mixin dark-menu-item-hover() {
  color: inherit;

  // need to override typography styles here
  .#{$ns}-menu-item-icon,
  .#{$ns}-submenu-icon {
    color: $pt-dark-icon-color;
  }
}

@mixin menu-item-active($is-dark) {
  $intent-colors: $menu-item-intent-colors;
  $background-alpha: 0.1;

  @if $is-dark {
    $intent-colors: $dark-menu-item-intent-colors;
    $background-alpha: 0.2;
  } @else {
    .#{$ns}-menu-item-label {
      color: inherit;
    }
  }

  background-color: rgba(list.nth(map.get($intent-colors, "primary"), 1), $background-alpha);
  color: list.nth(map.get($intent-colors, "primary"), 2);

  &::before,
  .#{$ns}-menu-item-icon,
  .#{$ns}-menu-item-selected-icon,
  .#{$ns}-submenu-icon {
    color: list.nth(map.get($intent-colors, "primary"), 2);
  }

  @each $intent in ("success", "warning", "danger") {
    &.#{$ns}-intent-#{$intent} {
      background-color: rgba(list.nth(map.get($intent-colors, $intent), 1), $background-alpha);
      color: list.nth(map.get($intent-colors, $intent), 2);

      &::before,
      .#{$ns}-menu-item-icon,
      .#{$ns}-submenu-icon {
        color: inherit;
      }
    }
  }

  @media (forced-colors: active) and (prefers-color-scheme: dark) {
    // Windows High Contrast dark theme
    background-color: $pt-high-contrast-mode-active-background-color;
  }
}

@mixin menu-item-intent($intent, $is-dark, $bg-color, $fg-color, $fg-color-active) {
  &.#{$ns}-intent-#{$intent} {
    color: $fg-color;

    &::before,
    .#{$ns}-menu-item-icon,
    .#{$ns}-menu-item-selected-icon,
    .#{$ns}-submenu-icon,
    .#{$ns}-menu-item-label {
      color: inherit;
    }

    &:hover {
      @if $is-dark {
        background-color: rgba($bg-color, 0.2);
      } @else {
        background-color: rgba($bg-color, 0.1);
      }
    }

    &:active,
    &.#{$ns}-active {
      @if $is-dark {
        background-color: rgba($bg-color, 0.3);
      } @else {
        background-color: rgba($bg-color, 0.2);
      }
      color: $fg-color-active;
    }
  }
}

@mixin menu-item-large() {
  font-size: $pt-font-size-large;
  padding-bottom: $menu-item-padding-vertical-large;
  padding-top: $menu-item-padding-vertical-large;

  .#{$ns}-menu-item-icon {
    height: $menu-item-line-height;
  }

  &::before,
  .#{$ns}-submenu-icon {
    // SVG icons remain standard size when menu is large
    margin-top: ($menu-item-line-height - $pt-icon-size-standard) * 0.5;
  }
}

@mixin menu-item-small() {
  line-height: $menu-item-line-height-small;
  padding-bottom: $menu-item-padding-vertical-small;
  padding-top: $menu-item-padding-vertical-small;

  .#{$ns}-menu-item-icon {
    height: $menu-item-line-height-small;
  }
}

@mixin menu-divider() {
  border-top: 1px solid $pt-divider-black;
  display: block;
  // use negative margin to make dividers take up full menu width
  margin: $pt-spacing (-$pt-spacing);

  .#{$ns}-dark & {
    border-top-color: $pt-dark-divider-white;
  }
}

@mixin menu-header($heading-selector: null) {
  @include menu-divider;
  cursor: default;
  padding-left: $menu-item-padding - $pt-spacing;

  @if $heading-selector != null {
    &:first-of-type {
      border-top: none;
    }

    #{$heading-selector} {
      @include menu-heading;
    }

    &:first-of-type #{$heading-selector} {
      padding-top: 0;
    }
  }
}

@mixin menu-heading() {
  @include heading-typography;
  @include overflow-ellipsis;
  // a little extra space to avoid clipping descenders (because overflow hidden)
  line-height: $pt-icon-size-standard + 1px;
  margin: 0;
  padding: ($pt-spacing * 2) $menu-item-padding 0 ($pt-spacing * 2);
}

@mixin menu-header-large($heading-selector) {
  #{$heading-selector} {
    font-size: $pt-spacing * 4.5;
    padding-bottom: $pt-spacing;
    padding-top: $pt-spacing * 4;
  }

  &:first-of-type #{$heading-selector} {
    padding-top: 0;
  }
}