//
// Copyright 2017 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@import "@material/animation/variables";
@import "@material/elevation/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";

$mdc-simple-menu-fade-duration: .2s;
$mdc-simple-menu-item-fade-duration: .3s;

// postcss-bem-linter: define simple-menu
.mdc-simple-menu {
  @include mdc-elevation(2);

  @include mdc-theme-dark {
    background-color: #424242;
  }

  display: none;
  position: absolute;
  box-sizing: border-box;
  min-width: 170px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  margin: 0;
  padding: 0;
  transform: scale(0);
  transform-origin: top left;
  border-radius: 2px;
  background-color: white;
  opacity: 0;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  will-change: transform, opacity;
  z-index: 4;

  &:focus {
    outline: none;
  }

  &--open {
    display: inline-block;
    transform: scale(1);
    opacity: 1;
  }

  &--animating {
    display: inline-block;
    transition: opacity $mdc-simple-menu-fade-duration $mdc-animation-deceleration-curve-timing-function;
    overflow-y: hidden;
  }

  &__items {
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    will-change: transform;

    // stylelint-disable plugin/selector-bem-pattern, selector-no-universal, selector-max-universal
    > * {
      opacity: 0;
    }

    > .mdc-list-item {
      cursor: pointer;
    }

    .mdc-simple-menu--animating & {
      overflow-y: hidden;

      > * {
        transition-duration: $mdc-simple-menu-item-fade-duration;
        transition-property: opacity;
        transition-timing-function: $mdc-animation-deceleration-curve-timing-function;
      }
    }

    .mdc-simple-menu--open & {
      > * {
        opacity: 1;
        will-change: opacity;
      }
    }
    // stylelint-enable plugin/selector-bem-pattern, selector-no-universal, selector-max-universal
  }

  // stylelint-disable plugin/selector-bem-pattern
  [dir="rtl"] & {
    transform-origin: top right;
  }
  // stylelint-enable plugin/selector-bem-pattern

  // Note: it's appropriate to use `!important` for these since:
  // - they override defaults at several levels of specificity;
  // - they're optional classes that are purposely added by the developer to obtain a desired behaviour.
  &--open-from-top-left {
    transform-origin: top left !important;
  }

  &--open-from-top-right {
    transform-origin: top right !important;
  }

  &--open-from-bottom-left {
    transform-origin: bottom left !important;
  }

  &--open-from-bottom-right {
    transform-origin: bottom right !important;
  }

  // stylelint-disable plugin/selector-bem-pattern
  .mdc-list-group,
  .mdc-list {
    padding: 8px 0;
  }

  .mdc-list-item {
    @include mdc-typography(subheading2);

    @include mdc-theme-dark(".mdc-simple-menu", true) {
      color: white;
    }

    position: relative;
    padding: 0 16px;
    outline: none;
    color: inherit;
    text-decoration: none;
    user-select: none;
  }

  .mdc-list-divider {
    @include mdc-theme-dark(".mdc-simple-menu", true) {
      border-color: rgba(white, .12);
    }
  }

  .mdc-list-item__start-detail {
    color: rgba(black, .54);

    @include mdc-theme-dark(".mdc-simple-menu", true) {
      color: rgba(white, .54);
    }
  }

  // stylelint-disable selector-no-qualifying-type
  &--selected.mdc-list-item,
  &--selected.mdc-list-item .mdc-list-item__start-detail {
    @include mdc-theme-prop(color, primary);
  }
  // stylelint-enable selector-no-qualifying-type

  // TODO(sgomes): Revisit when we have interactive lists.
  .mdc-list-item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 120ms $mdc-animation-deceleration-curve-timing-function;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    content: "";
  }

  .mdc-list-item:focus::before {
    opacity: .12;
  }

  .mdc-list-item:active::before {
    // Slightly darker value for visual distinction.
    // This allows a full base that has distinct modes.
    // Progressive enhancement with ripples will provide complete button spec alignment.
    opacity: .18;
  }

  .mdc-list-item[aria-disabled="true"] {
    @include mdc-theme-prop(color, text-disabled-on-light);

    @include mdc-theme-dark(".mdc-select") {
      @include mdc-theme-prop(color, text-disabled-on-dark);
    }

    cursor: default;
  }

  .mdc-list-item[aria-disabled="true"] {
    &:focus::before,
    &:active::before {
      opacity: 0;
    }
  }
  // stylelint-enable plugin/selector-bem-pattern
}

// postcss-bem-linter: end