//
// 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 {
  display: none;
  position: absolute;
  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;
  white-space: nowrap;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
  will-change: transform, opacity;
  z-index: 4;

  @include mdc-elevation(2);

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

  &: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-linear-out-slow-in-timing-function;
  }

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

    /* stylelint-disable plugin/selector-bem-pattern, selector-no-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-linear-out-slow-in-timing-function;
      }
    }

    .mdc-simple-menu--open & {
      > * {
        opacity: 1;
        will-change: opacity;
      }
    }
    /* stylelint-enable plugin/selector-bem-pattern, selector-no-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: 0;
  }

  .mdc-list-item {
    position: relative;
    padding: 0 16px;
    outline: none;
    color: inherit;
    text-decoration: none;

    @include mdc-typography(body2);

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

  .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-linear-out-slow-in-timing-function;
    border-radius: inherit;
    background: currentColor;
    content: "";
    opacity: 0;
  }

  .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;
  }

  /* stylelint-enable plugin/selector-bem-pattern */
}

/* postcss-bem-linter: end */