@use "../../../styles/tools/convert";
@use "../../../styles/tools/generate";
@use "./config";

/// Applies base controls styles used for every controls-base
/// @param {map} $states - Map of controls states
@mixin base($states: config.$base) {
  @include generate.css-map($states, "default");

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;

  @media (hover: hover) {
    &:hover {
      @include generate.css-map($states, "hover");
    }
  }

  &:focus-visible {
    @include generate.css-map($states, "focus");
  }

  &:active,
  &.is-active {
    @include generate.css-map($states, "active");

    z-index: 2;
  }

  &[aria-disabled="true"],
  &[disabled] {
    @include generate.css-map($states, "disabled");

    cursor: not-allowed;
  }
}

@mixin color() {
  @include generate.css-map(config.$states, "default");

  @media (hover: hover) {
    &:hover {
      @include generate.css-map(config.$states, "hover");
      z-index: 2;
    }
  }

  &:focus-visible {
    @include generate.css-map(config.$states, "focus");

    z-index: 2;
  }

  &:active,
  &.is-active {
    @include generate.css-map(config.$states, "active");
    z-index: 2;
  }

  &[aria-disabled="true"],
  &[disabled] {
    @include generate.css-map(config.$states, "disabled");
    cursor: not-allowed;
  }
}