@import './menu-theme';

// menu width must be a multiple of 56px
$oui-menu-overlay-min-width: 205px !default; // 56 * 2
$oui-menu-overlay-max-width: 244px !default; // 56 * 5

$oui-menu-item-height: 48px !default;
$oui-menu-side-padding: 16px !default;
$oui-menu-icon-margin: 16px !default;

$oui-menu-border-radius: 4px !default;

$oui-menu-z-index: 9999;

$oui-menu-border-color: 1px solid #c8c8c8;

/*box shadow and border as a boxshadow(good for zoom-in and zoom-out in browsers) */
$oui-menu-box-shadow: 0px 1px 3px 0px #4a4a4a;
$oui-menu-border-box-shadow: 0 0 0 1px #c8c8c8;

/*font size and line-height*/
$oui-menu-font-size: 13px;
$oui-menu-line-height: 22px;

/*reset the browser default properties*/
@mixin oui-button-reset {
  & {
    border: 0 none;
    background: none;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  }
  &:focus {
    outline: 0 none;
  }
  // The `outline: none` from above works on all browsers, however Firefox also
  // adds a special `focus-inner` which we have to disable explicitly. See:
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Firefox
  &::-moz-focus-inner {
    border: 0;
  }
}

@mixin oui-menu-base() {
  //min-width: $oui-menu-overlay-min-width;
  max-width: $oui-menu-overlay-max-width;
  overflow: auto;
}

.oui-menu-panel {
  @include oui-menu-base();
  max-height: calc(100vh - #{$oui-menu-item-height});
  background-color: #fff;
  box-shadow: $oui-menu-box-shadow;
  outline: 0;
  z-index: $oui-menu-z-index;
  font-size: $oui-menu-font-size;
  line-height: $oui-menu-line-height;
}

.oui-menu-content {
  //box-shadow: $oui-menu-border-box-shadow;
  padding: 10px 0px;
  //added border
  border: $oui-menu-border-color;
  overflow: hidden;
}

@mixin oui-menu-item-base() {
  //white-space: nowrap;
  & {
    font-size: 13px;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    // Needs to be a block for the ellipsis to work.
    display: block;
    line-height: $oui-menu-line-height;
    padding: 0 $oui-menu-side-padding;
    text-align: left;
    text-decoration: none; // necessary to reset anchor tags
    // Required for Edge not to show scrollbars when setting the width manually. See #12112.
    max-width: 100%;
    width: 100%;
  }

  &[disabled] {
    cursor: default;
  }

  .oui-icon {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    text-align: center;
    margin-top: 1px;
    svg {
      vertical-align: top;
    }
  }
}

.oui-menu-item {
  @include oui-button-reset();
  @include oui-menu-item-base();
  & {
    position: relative;
    padding: 8px 8px;
    display: block;
    color: #333;
    cursor: pointer;
    position: relative;
    min-width: $oui-menu-overlay-min-width;
    max-width: $oui-menu-overlay-max-width;
    width: 100%;
  }

  span {
    display: inline-block;
    max-width: 200px;
    vertical-align: top;
    line-height: 20px;
    margin-top: 1px;
  }
}

.oui-menu-item:hover,
.oui-menu-item.cdk-program-focused,
.oui-menu-item.cdk-keyboard-focused,
.oui-menu-item-highlighted {
  &:not([disabled]) {
    background: #eeeeee;
    text-decoration: none;
  }
}

@mixin oui-menu-icon-hover {
  background-color: rgba(200, 200, 200, 0.4);
  border-radius: 2px;
  transition: opacity 0.2s cubic-bezier(0.35, 0, 0.25, 1),
    background-color 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  cursor: pointer;
}

.oui-menu-icon-container {
  height: 20px;
}
.oui-menu-icon {
  svg {
    padding: 2px;
    pointer-events: auto !important;
  }
}
.oui-menu-icon,
.oui-menu-icon-hover {
  display: inline-block;
  margin: 0;
  &:hover {
    @include oui-menu-icon-hover();
  }
}
.oui-menu-icon-hover {
  @include oui-menu-icon-hover();
}
.oui-menu-icon-container.oui-menu-icon-vertical {
  display: block;
  height: 24px;
  .oui-menu-icon {
    transform: rotate(90deg);
  }
}

body {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}