@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

/**
 * These variables are moved into their own file so that they can be shared across multiple components.
 * without the need to pull in all of the other state layer styles.
 */

//  Class Names
$stateLayerBaseClass: '#{constants.$prefix}state-layer';

// Css Custom Properties
$cssVarBase: '--#{$stateLayerBaseClass}';
$offset: '#{$cssVarBase}-offset';
$outline-offset: '#{$cssVarBase}-outline-offset';
$outline-color: '#{$cssVarBase}-outline-color';
$outline-width: '#{$cssVarBase}-outline-width';
$outline-style: '#{$cssVarBase}-outline-style';
$outline: '#{$cssVarBase}-outline';
$background: '#{$cssVarBase}-background';
$opacity: '#{$cssVarBase}-opacity';
$top: '#{$cssVarBase}-top';
$right: '#{$cssVarBase}-right';
$bottom: '#{$cssVarBase}-bottom';
$left: '#{$cssVarBase}-left';
$focus-outline-color: '#{$cssVarBase}-border-focus-color';
$focus-outline-width: '#{$cssVarBase}-border-focus-width';

// State Layer Token Map
$state-layer-tokens: (
  'base': (
    'enabled': (
      $background: tokens.$bm-sem-color-state-layer-enabled,
      $opacity: 1,
    ),
    'hover': (
      $background: tokens.$bm-sem-color-state-layer-hover,
      $opacity: 1,
    ),
    'active': (
      $background: tokens.$bm-sem-color-state-layer-active,
      $opacity: 1,
    ),
    'focus-within': (
      $outline-color: tokens.$bm-sem-color-border-focus,
      $opacity: 1,
    ),
    'focus-visible-within': (
      $outline-color: tokens.$bm-sem-color-border-focus,
      $opacity: 1,
    ),
    'disabled': (
      $background: 'unset',
      $opacity: 0,
    ),
  ),
);

// Helper Mixins
@mixin get-state-layer-styles-body($state-layer-state-styles) {
  @each $css-prop, $css-value in $state-layer-state-styles {
    #{$css-prop}: $css-value;
  }
}

// Get state specific selector
@function getStateLayerSelector($parent, $state) {
  @if ($state == 'focus-within') {
    @return '#{$parent}:#{$state} > .#{$stateLayerBaseClass}.#{$stateLayerBaseClass}--with-#{$state}';
  } @else if ($state == 'focus-visible-within') {
    @return '#{$parent}:is(:focus-visible, :has(:focus-visible)) > .#{$stateLayerBaseClass}:not(.#{$stateLayerBaseClass}--without-#{$state})';
  } @else {
    @return '#{$parent}:#{$state} > .#{$stateLayerBaseClass}:not(.#{$stateLayerBaseClass}--without-#{$state})';
  }
}