@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "../../styles/type";
@import "../../styles/color";
@import "../../styles/border";
@import "../../styles/layers";
@import "../../styles/animation";
@import "~@cultureamp/kaizen-component-library/styles/layout";

$side-padding: 3/4 * $ca-grid;

.menuList {
  background: #fff;
  border: 1px solid $kz-color-wisteria-200;
  box-shadow: $ca-box-shadow;
  line-height: 40px;
}

.header {
  padding: 10px $side-padding;
  text-align: left;
  color: add-alpha($kz-color-wisteria-800, 40%);
  border-bottom: $ca-border-color 1px solid;
}

.header__title {
  @include ca-type-ideal-labels-and-legends;
  @include ca-inherit-baseline;
  display: block;
}

.menuItem {
  @include ca-type-ideal-body;
  @include ca-inherit-baseline;
  composes: interactiveIconWrapper from "../Icon/Icon.module.scss";
  background: transparent;
  color: $kz-color-wisteria-800;
  cursor: pointer;
  text-align: left;

  transition: $ca-duration-immediate background-color ease,
    $ca-duration-immediate color ease;

  padding: 10px $side-padding;
  text-decoration: none;
  display: flex;
  flex: 0 0 100%;

  [dir="rtl"] & {
    text-align: right;
  }

  &.menuItem--active,
  &:hover,
  &:focus {
    background: $kz-color-stone;
    color: $kz-color-cluny-500;
    // override Murmur global styles :(
    text-decoration: none;

    .menuItem__Icon {
      color: $kz-color-cluny-500;
    }
  }
}

.menuItem--active {
  composes: active from "../Icon/Icon.module.scss";
}

.menuItem--destructive {
  color: $kz-color-coral-600;
  .menuItem__Icon {
    color: $kz-color-coral-600;
  }
}

.menuItem__Label {
  flex: 1;

  :not(:only-child) {
    @include ca-margin($end: $ca-grid / 2);
  }
}

.menuItem__Icon {
  text-align: right;
  color: $kz-color-wisteria-800;
  position: relative;
  top: 3px;

  .hoverIcon & {
    opacity: 0;
  }
  .menuItem--active &,
  .hoverIcon:hover &,
  .hoverIcon:focus & {
    opacity: 1;
  }
}

.separator {
  height: 1px;
  width: 100%;
  border: 0;
  background: $kz-color-wisteria-200;
  visibility: visible;
  margin: 5px 0;
}