$menu-container: #{$prefix}-menu;
$select-container: #{$prefix}-selectbox;

$border-style: 1px solid;
$border-radius: $theme-base-border-radius;

// dimsum components
$dsseparator: #{$prefix}-separator;

.#{$menu-container}-separator {
  margin: space(xs) * 0.25 space(s);
  &__title {
    margin: 0;
    margin-top: space(xs);
    margin-bottom: space(xs);
    padding: 0 space(s);
    color: color(neutral, 500);
  }
  &:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background-color: color(neutral, 100);
  }
  &:first-child {
    display: none;
  }
}
.#{$menu-container} {
  .#{$prefix}-separator-wrapper{
    margin: 0;
  }
}

.menu-component-internal-wrapper{
  min-width: space(l) * 5;
  max-width: space(l) * 14;
}

.#{$menu-container} {
  border: $border-style color(neutral, 200);
  margin: 0;
  //display: inline-block;
  padding: space(xs) 0;
  background: color(neutral, 000);
  color: color(neutral, 800);
  list-style: none;
  min-width: space(xxl) * 2;
  @include border-radius($border-radius);
  @include box-shadow(depth(300));

  .#{$dsseparator} {
    border-color: color(neutral, 300);
  }
  &--type-phone{
    margin-top: space(xxs);
  }
}

// MenuCombobox styles
.#{$menu-container} {
  .#{$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);
  }
}

@import "MenuItems/MenuItem";
@import "MenuItems/SearchableGroup";
@import "./MenuCombobox.scss";