//
// Copyright 2019 Stijn de Witt. Some rights reserved.
// Licensed under the MIT Open Source license. 
// https://opensource.org/licenses/MIT
// See LICENSE for details.
//
// Based on code copyright 2018 Google Inc. All Rights Reserved.
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
// See LICENSE-MDC for details.
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under these licenses is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the licenses for the specific language governing permissions and
// limitations under these licenses.
// 

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

$mdc-menu-fade-in-duration: .03s;
$mdc-menu-fade-out-duration: .075s;
$mdc-menu-scale-duration: .12s;

.solids .anchor {
  position: relative;
  overflow: visible;

  > input[type=checkbox] {
    display: none;

    &:checked {
      ~ label {
        position: relative;
        display: block;
        z-index: 1;
      }
      ~ .menu {
        display: inline-block;
        transform: scale(1);
        opacity: 1;
        width: initial;
        height: initial;
      }
    }
  }
}

.solids .menu {
  @include elevation(2);
  @include mdc-theme-prop(background-color, background);

  position: absolute;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  transform: scale(0);
  transform-origin: top left;
  border-radius: 2px;
  opacity: 0;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  will-change: transform, opacity;
  z-index: 4;
  transition: opacity $mdc-menu-fade-in-duration linear, transform $mdc-menu-scale-duration $mdc-animation-deceleration-curve-timing-function;

  &:focus {
    outline: none;
  }

  /*
  .list {
    box-sizing: border-box;
//    transform: scale(1);
    overflow-x: hidden;
    overflow-y: auto;
    will-change: transform;

    .item {
      @include typography(subtitle1);
      cursor: pointer;
//      position: relative;
      outline: none;
      color: inherit;
      text-decoration: none;
      user-select: none;

      .graphic {
        @include mdc-theme-prop(color, text-secondary-on-background);
      }
    }

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

      cursor: default;
      pointer-events: none;

      // TODO(#1495): Disabled menu items shouldn't be focusable, so this style shouldn't be necessary.
      &:focus::before {
        opacity: 0;
      }
    }
  }
*/
  [dir="rtl"] & {
    transform-origin: top right;
  }

  .group {
    padding: 8px 0;
  }
}