// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

@import 'package:angular_components/material_menu/mixins';
@import 'package:angular_components/css/material/material';
@import 'package:angular_components/css/material/shadow';
@import 'package:angular_components/material_button/mixins';
@import 'package:angular_components/material_popup/mixins';

material-fab {
  &.invisible {
    opacity: 0;
  }
}

.close-menu {
  height: $mat-grid * 7;
  background-color: $mat-grey-200;

  &:hover {
    background-color: $mat-grey-200;

    .close-icon {
      opacity: 1;
    }
  }
}

.close-icon {
  opacity: $mat-opacity-light;
  transition: opacity $mat-transition-desktop $mat-transition-standard;
  will-change: opacity;
}

.menu-content {
  @include material-shadow();
  @include menu-item-text-wrap();
  background: $bg-color;
  border-radius: 50%;
  display: flex;
  overflow: hidden;
  transition: border-radius $mat-transition-fast $mat-transition-standard,
              width $mat-transition $mat-transition-deceleration;
  height: $fab-size;
  max-height: 100vh;
  width: $fab-size;

  &.visible {
    border-radius: $popup-border-radius;
    height: auto;
    width: 30 * $mat-grid;

    &.has-icons {
      width: 35 * $mat-grid;
    }
  }

  &.closing {
    transition: border-radius $mat-transition $mat-transition-deceleration,
                width $mat-transition-fast $mat-transition-standard;
  }
}

.content-wrapper {
  @include item-height('menu-item-groups', $mat-grid * 7);
  flex: 1;
  opacity: 0;
  overflow: auto;
  transition: opacity $mat-transition $mat-transition-deceleration;

  &.visible {
    opacity: 1;
  }

  &.closing {
    transition: opacity $mat-transition-fast $mat-transition-standard;

    // Hide scrollbars when closing.
    overflow: hidden;
  }
}

.menu-groups {
  padding: $mat-grid 0;
  border-top: 1px solid $mat-border-light;
}
