material-components_material-web/menu/lib/_menu.scss

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

// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
// go/keep-sorted end
// go/keep-sorted start
@use '../../elevation/lib/elevation';
@use '../../focus/focus-ring';
@use '../../list/list' as md-list;
@use '../../list/list-item';
@use '../../sass/resolvers';
@use '../../sass/theme';
@use '../../tokens';
// go/keep-sorted end

$_custom-property-prefix: 'menu';

@mixin theme($theme) {
  $theme: theme.validate-theme(tokens.md-comp-menu-values(), $theme);
  $theme: _resolve-tokens($theme);
  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);

  @include theme.emit-theme-vars($theme);
}

@mixin styles() {
  $tokens: tokens.md-comp-menu-values();
  $tokens: _resolve-tokens($tokens);
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);

  :host {
    @each $token, $value in $tokens {
      --_#{$token}: #{$value};
    }

    @include md-list.theme(
      (
        list-item-container-color: var(--_container-color),
      )
    );

    @include elevation.theme(
      (
        level: var(--_container-elevation),
        shadow-color: var(--_container-shadow-color),
        surface-tint: var(--_container-surface-tint-layer-color),
      )
    );

    @include focus-ring.theme(
      (
        shape: var(--_container-shape),
      )
    );

    min-width: 300px;
  }

  .menu {
    border-radius: var(--_container-shape);
    display: none;
    opacity: 0;
    z-index: 20;
    position: absolute;
    user-select: none;
    max-height: inherit;
    height: inherit;
    min-width: inherit;

    &.fixed {
      position: fixed;
    }

    md-list {
      height: inherit;
      max-height: inherit;
      display: block;
      overflow: auto;
      min-width: inherit;
    }

    &.has-overflow md-list {
      overflow: visible;
    }

    &.animating md-list {
      pointer-events: none;
      overflow: hidden;
    }

    &.animating ::slotted(.hidden) {
      opacity: 0;
    }

    slot {
      display: block;
      height: inherit;
      max-height: inherit;
    }
  }

  md-elevation {
    position: absolute;
    inset: 0;
  }
}

@function _resolve-tokens($tokens) {
  $menu-tokens: _remove-unused-tokens($tokens);
  @return elevation.resolve-tokens($menu-tokens, 'elevation-key');
}

// removes unused tokens
@function _remove-unused-tokens($tokens) {
  $unused-tokens: ();
  @each $token in map-keys($tokens) {
    $index: string.index($token, 'list-item');

    @if $index {
      $unused-tokens: list.append($unused-tokens, $token);
    }
  }

  @each $token in $unused-tokens {
    $tokens: map.remove($tokens, $token);
  }

  @return $tokens;
}