// 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 'material_drawer';
@import 'package:angular_components/app_layout/mixins';
@import 'package:angular_components/css/material/material';
@import 'package:angular_components/css/material/shadow';

:host {
  @include fit;

  background-color: transparent;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

:host(.mat-drawer-expanded) {
  pointer-events: auto;
}

:host([overlay].mat-drawer-expanded) {
  background-color: $mat-lighter-transparent-black;
  transition-duration: $mat-transition-mobile-entering;
}

:host([overlay]) {
  background-color: transparent;
  transition: background-color $mat-transition-mobile-leaving $mat-transition-standard;
}

:host > .drawer-content {
  @include material-drawer-common;
  @include shadow-none;

  transform: translateX(0);
  pointer-events: auto;
  transition-property: box-shadow, left, right, transform, width;
  transition-duration: $mat-transition-mobile-leaving;
  transition-timing-function: $mat-transition-sharp;
}

:host(.mat-drawer-expanded) > .drawer-content {
  @include shadow-elevation(16);

  transition-duration: $mat-transition-mobile-entering;
  transition-timing-function: $mat-transition-deceleration;
}

@include mat-temporary-drawer-width($mat-drawer-width-default, $host: true);
