@mixin button-styles(
  $class: 'obl-button',
  $icon-color: var(--obl-default-button-text-color),
  $outline-color: #080808,
  $background: #d4d4d4,
  $text: black,
  $background-hover: #e6e6e6,
  $text-hover: black,
  $text-disabled: gray,
  $disabled-background: #d4d4d4,
  $radius: initial
) {
  @if ($class != 'obl-button') {
    $class: obl-button-#{$class};
  }

  .#{$class} {
    --obl-default-icon-color: #{$icon-color};
    --default-border-outline-color: #{$outline-color};
    --obl-button-background-color: #{$background};
    --obl-button-text-color: #{$text};
    --obl-button-text-hover-color: #{$text-hover};
    --obl-button-background-hover-color: #{$background-hover};
    --obl-button-text-disabled-color: #{$text-disabled};
    --obl-button-background-disabled-color: #{$disabled-background};
    --obl-spinner-color: gray;
    --obl-spinner-width: 14px;
    --obl-button-active-color: white;

    --obl-default-button-padding: 10px;

    background: var(--obl-button-background-color);
    color: var(--obl-button-text-color);
    border: none;
    padding: var(--obl-default-button-padding);
    font: inherit;
    cursor: pointer;
    outline: inherit;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border: 1.5px dotted transparent;
    border-radius: var(--obl-default-button-border-radius);

    &:focus {
      border: 1.5px dotted var(--default-border-outline-color);
    }

    &.selected,
    &:hover {
      color: var(--obl-button-text-hover-color);
      background: var(--obl-button-background-hover-color);
    }

    &:active {
      color: var(--obl-button-active-color);
      transition: all 0.25s ease-in-out 0ms;
    }

    &[disabled] {
      color: var(--obl-button-text-disabled-color);
      background: var(--obl-button-background-disabled-color);

      --obl-default-icon-color: var(--obl-button-text-disabled-color);
      cursor: default;
    }

    &.loading {
      color: var(--obl-button-text-disabled-color);
      background: var(--obl-button-background-disabled-color);

      --obl-default-icon-color: var(--obl-button-text-disabled-color);
      cursor: default;
    }

    &[small=true] {
      font-size: small;
      height: 25px;
    }
  }
}

g[obl-hex-button].disabled {
  --obl-default-icon-color: var(--default-disabled-color);
}

g[obl-svg-icon-button] {
  --obl-button-background-color: #d4d4d4;
  --obl-default-icon-color: var(--default-disabled-color);
}