////
/// @group form-select
////

@use 'sass:map';

@import '@react-md/theme/dist/scss/color-palette';
@import '@react-md/theme/dist/scss/functions';
@import '@react-md/utils/dist/scss/variables';

/// The additional amount of padding to apply to the top of the select field
/// container in addition to normal text field padding. This is used so the
/// floating label does not cover the scrollable content.
/// @type Number
$rmd-select-native-multiple-padding: 0.75rem !default;

/// The default position for a text-field addon when the native select is a
/// multi-select. If this isn't set, the addon will always be centered based on
/// the size of the select field instead.
/// @type Number
$rmd-select-native-addon-top: 1rem !default;

/// The elevation level for a temporary listbox. This should be a number between
/// 0-24 as it generates a material design box shadow value.
/// @type Number
$rmd-listbox-elevation: 8 !default;

/// The background color for a temporary listbox in light themes.
///
/// @type Color
/// @since 2.7.0
$rmd-listbox-light-background-color: rmd-theme-var(surface) !default;

/// The background color for a temporary listbox in dark themes when the
/// `$rmd-theme-dark-elevation` feature flag is also enabled.
///
/// @see $rmd-theme-dark-elevation
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-listbox-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-listbox-elevation
) !default;

/// The background color for a temporary listbox in dark themes.
///
/// @type Color
/// @since 2.7.0
$rmd-listbox-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-listbox-dark-elevation-background-color,
  $rmd-listbox-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;

/// The base background color to apply to temporary listboxes.
///
/// @type Color
/// @since 2.7.0
$rmd-listbox-background-color: if(
  $rmd-theme-light,
  $rmd-listbox-light-background-color,
  $rmd-listbox-dark-background-color
) !default;

/// The z-index to use for a temporary listbox.
///
/// @require $rmd-utils-temporary-element-z-index
/// @type Number
$rmd-listbox-z-index: $rmd-utils-temporary-element-z-index !default;

/// The styles to apply when an option is focused with `aria-activedescendant`
/// behavior. This should be a map of styles that should be applied.
///
/// @require $rmd-blue-500
/// @type Map
$rmd-option-focused-styles: (
  box-shadow: inset 0 0 0 2px $rmd-blue-500,
) !default;

/// The styles to apply when an option is selected. This should be a map of
/// style properties with values to apply.
///
/// @require $rmd-blue-900
/// @require $rmd-white-base
/// @type Map
$rmd-option-selected-styles: (
  background-color: $rmd-blue-900,
  color: $rmd-white-base,
) !default;

/// The amount of `left` (or right when rtl languages are used) to apply to the
/// option's selected checkmark css.
/// @type Number
$rmd-option-selected-offset: 0.5rem !default;

/// The content to use for the selected state of the option. If this value is
/// set to null, the `::after` styles will not be created and the
/// `$rmd-option-horizontal-padding` variable will not be used to update the
/// list item's horizontal padding for options. This is useful if you want to
/// use icons or ignore the selected state instead.
/// @type String
$rmd-option-selected-content: '\2713' !default;

/// The amount of horizontal padding that should be applied to each option.
/// This overrides the `$rmd-list-item-horizontal-padding` css variable so that
/// the selected checkmark styles can appear nicely.
/// @type Number
/// @see rmd-option-selected-content
$rmd-option-horizontal-padding: 1.5rem !default;