@use "sass:map";

@use "../../variables" as *;
@use "../../mixins" as *;
@use "../../utils" as *;

$button-mixin-options: (
  "background": true,
  "indent": true,
  "text": true,
);

%button-reseter {
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  outline: none;
  border: none;
}

@mixin button($name, $options: $button-mixin-options) {
  $options: map.merge($button-mixin-options, $options);

  @extend %button-reseter;

  transition:
    background 0.3s ease,
    padding 0.3s ease,
    width 0.3s ease;

  @if map.get($options, "text") {
    font-size: mvar($name, "fs");
    color: mvar($name, "fg");
    line-height: 1.286;
    font-weight: 700;
  }

  @if map.get($options, "indent") {
    padding: mvar($name, "pv") mvar($name, "ph");
  }

  @if map.get($options, "background") {
    background-color: mvar($name, "bg.main");

    &.hover,
    &:hover {
      background-color: mvar($name, "bg.hover", true);
    }

    &.active,
    &:active {
      background-color: mvar($name, "bg.active", true);
    }

    &:disabled,
    &.disabled {
      opacity: 0.8;
    }
  }
}
