@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;
@use './stateLayerVars.scss' as vars;

%state-layer-base {
  #{vars.$offset}: 0;
  #{vars.$opacity}: 0;
  #{vars.$outline-width}: tokens.$bm-sem-border-width-focus;
  #{vars.$outline-offset}: tokens.$bm-sem-size-focus-offset;
  #{vars.$outline-color}: transparent;
  #{vars.$outline-style}: solid;
  #{vars.$outline}: var(#{vars.$outline-color}) var(#{vars.$outline-style})
    var(#{vars.$outline-width});

  #{vars.$top}: 0;
  #{vars.$right}: 0;
  #{vars.$bottom}: 0;
  #{vars.$left}: 0;

  position: absolute;
  top: var(#{vars.$top});
  right: var(#{vars.$right});
  bottom: var(#{vars.$bottom});
  left: var(#{vars.$left});

  border-radius: inherit;
  opacity: var(#{vars.$opacity});
  background: var(#{vars.$background});

  outline-style: var(#{vars.$outline-style});
  outline-offset: var(#{vars.$outline-offset});
  outline-color: var(#{vars.$outline-color});
  outline-width: var(#{vars.$outline-width});
}

@mixin generateStateLayerStyles($state-layer-appearance) {
  $appearance: map.get(vars.$state-layer-tokens, $state-layer-appearance);

  @each $state, $state-layer-styles in $appearance {
    @if ($state == 'enabled') {
    } @else {
      #{vars.getStateLayerSelector('*', $state)} {
        @include vars.get-state-layer-styles-body($state-layer-styles);
      }
    }
  }
}

// Make base state layer classes
.#{vars.$stateLayerBaseClass} {
  @extend %state-layer-base;
}

@include generateStateLayerStyles('base');