////
/// @group menu
////

@import '~@react-md/elevation/dist/mixins';
@import '~@react-md/icon/dist/mixins';
@import '~@react-md/theme/dist/variables';
@import '~@react-md/theme/dist/helpers';
@import '~@react-md/theme/dist/mixins';
@import '~@react-md/utils/dist/mixins';
@import './functions';
@import './variables';

/// Creates the styles for one of the menu's theme values. This is mostly going
/// to be an internal helper mixin util.
///
/// @param {String} property - The property to set a `rmd-menu-theme-values`
/// value to.
/// @param {String} theme-style - One of the keys of `rmd-menu-theme-values` to
/// extract a value from.
/// @param {Color|String|Number} fallback [null] - A fallback value to use if
/// the css variable isn't set somehow. This will default to automatically
/// retrieving the default value from the `rmd-menu-theme-values` map when
/// `null`.
@mixin rmd-menu-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-menu-theme-values,
    menu
  );
}

/// Updates one of the menu's theme variables with the new value for the section
/// of your app.
///
/// @param {String} theme-style - The menu theme style type to update. This
/// should be one of the `$rmd-menu-theme-values` keys.
/// @param {Color|String|Number} value - The new value to use.
@mixin rmd-menu-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-menu-theme-values,
    menu
  );
}

/// @access private
@mixin rmd-menu {
  @include rmd-utils-hide-focus-outline;
  @include rmd-utils-scroll;

  &--elevated {
    @include rmd-elevation($rmd-menu-elevation);
    @include rmd-menu-theme(background-color);
    @include rmd-menu-theme(color);
    @include rmd-menu-theme(min-width);
    @include rmd-menu-theme(z-index);
  }

  &--horizontal {
    display: flex;
    flex-wrap: nowrap;
  }
}

/// Creates all the styles for the @react-md/menu package.
@mixin react-md-menu {
  @include rmd-theme-create-root-theme($rmd-menu-theme-values, menu);

  .rmd-menu {
    @include rmd-menu;
  }

  .rmd-menu-item {
    @include rmd-icon-theme-update-var(
      text-spacing,
      #{rmd-menu-theme-var(icon-spacing)}
    );
  }
}