@use "sass:map" as sass-map;
@use "../../../styles/tokens/base";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/color";
@use "../../../styles/tools/convert";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/map";
@use "./config";

/// Applies base button styles used for every button-base
/// @param {map} $states - Map of button 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: super;
  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;
  }
}

// Layout rules. Adds space between adjacent buttons and applies vertical spacing after a button.
@mixin layout {
  margin-bottom: space.get("large");

  &:not(:last-of-type) {
    margin-right: space.get("small");
  }
}

/// Styles our button appropriately
/// @param {map} $states - Map of button states
@mixin style($name, $config: config.$styles) {
  $states: sass-map.get($config, $name);

  @include generate.css-map($states, "default");

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

      z-index: 2;
    }
  }

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

    z-index: 2;
  }

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

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

@mixin square-base {
  display: inline-flex;
  flex: 0 0 auto;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  line-height: 0;
}

@mixin square-size($name, $config: config.$sizes) {
  $size: sass-map.get(sass-map.get($config, $name), "min-height");

  width: $size;
  height: $size;
}

@mixin icon($position) {
  backface-visibility: hidden;

  @if ($position == "left") {
    margin-left: config.$icon-offset-from-edge;
    margin-right: config.$icon-offset-from-text;
  }

  @if ($position == "right") {
    margin-left: config.$icon-offset-from-text;
    margin-right: config.$icon-offset-from-edge;
  }
}

// Fixes issue when a large icon in large button increases its height
@mixin large-button-large-icon-size-fix() {
  margin-top: convert.to-rem(-3px);
  margin-bottom: convert.to-rem(-3px);
}

@mixin color($type, $dark: false) {
  $type-config: sass-map.get(config.$variants, $type);

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

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

  &:focus-visible {
    outline: 2px solid var(--color-border-contrast);
    outline-offset: 2px;
    z-index: 2;
  }

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

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

@mixin preserve-width {
  width: initial !important;
  min-width: initial !important;
}