//
// Copyright 2023 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/internal/elevation';
@use '../../tokens';
// go/keep-sorted end

@mixin styles() {
  :host {
    color: unset;
    min-width: 210px;
    display: flex;
  }

  .field {
    cursor: default;
    outline: none;
  }

  .select {
    position: relative;
    flex-direction: column;
  }

  .icon.trailing svg,
  .icon ::slotted(*) {
    fill: currentColor;
  }

  .icon ::slotted(*) {
    width: inherit;
    height: inherit;
    font-size: inherit;
  }

  .icon slot {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .icon.trailing :is(.up, .down) {
    opacity: 0;
    /* 75 ms is half of min(animate open duration, animate closed duration)*/
    transition: opacity 75ms linear 75ms;
  }

  .select:not(.open) .down,
  .select.open .up {
    opacity: 1;
  }

  .field,
  .select,
  md-menu {
    min-width: inherit;
    width: inherit;
    max-width: inherit;
    display: flex;
  }

  md-menu {
    // Not inherited because it is applied every time the menu opens
    min-width: var(--__menu-min-width);
    // Inherits from `.menu-wrapper` because it is applied only when
    // `clampMenuWidth` is true
    max-width: var(--__menu-max-width, inherit);
  }

  .menu-wrapper {
    width: 0px;
    height: 0px;
    max-width: inherit;
  }

  md-menu ::slotted(:not[disabled]) {
    cursor: pointer;
  }

  .field,
  .select {
    width: 100%;
  }

  :host {
    display: inline-flex;
  }

  :host([disabled]) {
    pointer-events: none;
  }
}