//
// Copyright 2021 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

// go/keep-sorted start
@use '../../../elevation/elevation';
@use '../../../internal/motion/animation';
// go/keep-sorted end

$curve: animation.$standard-easing;
$default: 0s;
$delay: 0s;
$transition-duration: 0.25s;

$_reference: (
  'container-color': #fff,
  'container-height': 100%,
  'container-shape': 0 16px 16px 0,
  'container-width': 360px,
  // b/216384393 - Temporary existing token to use for shadow color
  'divider-color': #000,
  'modal-container-elevation': 1,
  'standard-container-elevation': 0,
);

@mixin theme($tokens) {
  // $supported-tokens: tokens.$md-comp-navigation-drawer-supported-tokens;

  @each $token, $value in $tokens {
    // @if list.index($supported-tokens, $token) == null {
    //   @error 'Token `#{$token}` is not a supported token.';
    // }

    @if $value {
      --md-navigation-drawer-#{$token}: #{$value};
    }
  }
}

@mixin styles() {
  $tokens: $_reference;

  :host {
    @each $token, $value in $tokens {
      --_#{$token}: var(--md-navigation-drawer-#{$token}, #{$value});
    }

    @include elevation.theme(
      (
        'level': var(--_standard-container-elevation),
        'shadow-color': var(--_divider-color),
      )
    );
  }

  :host {
    display: flex;
  }

  .md3-navigation-drawer {
    inline-size: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    overflow-y: auto;
    visibility: hidden;

    transition: inline-size $transition-duration $curve $delay,
      visibility $default $curve $transition-duration;
  }

  md-elevation {
    z-index: 0;
  }

  .md3-navigation-drawer--opened {
    visibility: visible;

    transition: inline-size $transition-duration $curve $delay,
      visibility $default $curve $default;
  }

  .md3-navigation-drawer--pivot-at-start {
    justify-content: flex-start;
  }

  .md3-navigation-drawer__slot-content {
    display: flex;
    flex-direction: column;
    position: relative;
  }
}