// ********************************************
// container definition
$menu-container: #{$prefix}-menu;
$menu-select-container: #{$prefix}-menu-select;
$item-container: #{$prefix}-menu-item;
$backdrop-el: #{$prefix}-menu__backdrop;
$select-container: #{$prefix}-selectbox;

$border-radius: $theme-base-border-radius;

.#{$backdrop-el} {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
}
.#{$menu-container}-s {
  &--is-root {
    margin: space(xxs) 0;
  }
  border: 1px solid color(neutral, 200);
  margin: 0;
  display: inline-block;
  padding: space(xs) 0;
  background: color(neutral, 000);
  color: color(neutral, 800);
  list-style: none;
  width: 100%;
  min-width: space(xxl) * 2;
  @include border-radius($border-radius);
  @include box-shadow(depth(200));

  .#{$select-container}__control {
    margin: 0 space(xs);
  }

  .#{$select-container}__option {
    // todo: we need a way to avoid doing arithmetic here
    padding: space(xs) * 1.25 space(l) space(xs) * 1.25 space(s);
  }
}

.#{$menu-container}__separator1 {
  margin: space(xs) 0;
  small {
    padding: 0 space(s);
    color: color(neutral, 500);
  }
  &:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: color(neutral, 100);
  }
}

.#{$item-container}s {
  display: flex;
  padding: space(xs) space(xs) * 1.5 space(xs) space(xs) * 1.5;
  transition: background-color duration(fast) easing(base);
  align-items: center;
  height: space(l);

  &__content {
    cursor: pointer;
    display: flex;
    flex: 1;
    align-items: center;
  }

  &__selectable-container {
    padding-right: space(xs);
    min-width: space(m);
    svg,
    svg:not([fill]) {
      @include icon(s, color(brand-primary, 600));
    }
  }

  &:hover,
  &--active {
    background-color: color(brand-primary, 200);
  }

  .menu-item-icon {
    @include icon(s, color(neutral, 600));
    margin-right: space(xs) * 1.5;
  }

  .drill-down-icon {
    @include icon(s, color(brand-primary, 600));
    margin-left: space(xs);
    margin-right: space(xxs) * -1;
  }

  &__label {
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;
    margin-right: space(s);
    margin-top: space(xxs) * 0.5;
    flex: 1;
  }

  &--selected {
    background: color(brand-primary, 600);
    color: color(neutral, 000);
    svg,
    svg:not([fill]) {
      fill: color(neutral, 000);
    }
  }

  &:active {
    background-color: color(brand-primary, 600);
    color: color(neutral, 000);
    svg,
    svg:not([fill]) {
      fill: color(neutral, 000);
    }
  }
}

.#{$menu-select-container} {
  &__icon {
    padding: 0 space(xxs) 0 space(xxs);
  }
}