@use "sass:map";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/convert";
@use "./config";

@mixin base($config: config.$tag) {
  @include generate.css-map($config);
}

@mixin size($name, $config: config.$sizes) {
  @include generate.css-map($config, $name);
}

@mixin color($color, $dark: false) {
  $color-config: config.$colors;
  $props: map.get($color-config, $color);
  color: map.get($props, color);
  background-color: map.get($props, background-color);
}

@mixin color-transparent() {
  border-color: var(--color-border-strong);
  border-style: solid;
}

@mixin buttton-disabled($is-icon: false) {
  $config: if($is-icon, config.$icon-states, config.$states);

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

@mixin button-base {
  cursor: pointer;
  outline-offset: 2px;
}

@mixin button($is-icon: false) {
  $config: if($is-icon, config.$icon-states, config.$states);

  @include generate.css-map($config, "default");
  @include button-base;

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

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

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

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

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

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

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

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