// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;

%base-button {
  --button-bg-color: initial;
  --button-fg-color: initial;
  --button-hover-bg-color: initial;
  --button-hover-fg-color: initial;
  --button-active-bg-color: initial;
  --button-active-fg-color: initial;
  --button-disabled-bg-color: initial;
  --button-disabled-fg-color: initial;
  --button-border-color: var(--button-bg-color);
  --button-focus-inner-ring-color: initial;
  --button-focus-outer-ring-color: initial;
  --button-width: initial;
  --button-height: #{$sz-32};

  appearance: none;
  width: var(--button-width);
  height: var(--button-height);
  background: var(--button-bg-color);
  color: var(--button-fg-color);
  border: $b-1 solid var(--button-border-color);
  border-radius: $br-8;

  &:hover {
    --button-bg-color: var(--button-hover-bg-color);
    --button-fg-color: var(--button-hover-fg-color);
  }

  &:active,
  &[aria-pressed="true"] {
    --button-bg-color: var(--button-active-bg-color);
    --button-fg-color: var(--button-active-fg-color);
  }

  &:focus-visible {
    outline: var(--button-focus-inner-ring-color) solid #{px2rem(2)};
    outline-offset: -#{px2rem(3)};

    --button-border-color: var(--button-focus-outer-ring-color);
    --button-fg-color: var(--button-focus-fg-color);
  }

  &:disabled {
    --button-bg-color: var(--button-disabled-bg-color);
    --button-fg-color: var(--button-disabled-fg-color);
  }
}

%base-button-primary {
  --button-bg-color: var(--color-accent-primary);
  --button-fg-color: var(--color-background-secondary);
  --button-hover-bg-color: var(--color-accent-tertiary);
  --button-hover-fg-color: var(--color-background-secondary);
  --button-active-bg-color: var(--color-accent-tertiary);
  --button-active-fg-color: var(--color-background-secondary);
  --button-disabled-bg-color: var(--color-accent-primary-muted);
  --button-disabled-fg-color: var(--color-background-secondary);
  --button-focus-bg-color: var(--color-accent-primary);
  --button-focus-fg-color: var(--color-background-secondary);
  --button-focus-inner-ring-color: var(--color-background-secondary);
  --button-focus-outer-ring-color: var(--color-accent-primary);

  &:active,
  &[aria-pressed="true"] {
    box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 0.2);
  }
}

%base-button-secondary {
  --button-bg-color: var(--color-background-tertiary);
  --button-fg-color: var(--color-foreground-secondary);
  --button-hover-bg-color: var(--color-background-tertiary);
  --button-hover-fg-color: var(--color-accent-primary);
  --button-active-bg-color: var(--color-background-quaternary);
  --button-active-fg-color: var(--color-accent-primary);
  --button-disabled-bg-color: transparent;
  --button-disabled-fg-color: var(--color-foreground-secondary);
  --button-focus-bg-color: var(--color-background-tertiary);
  --button-focus-fg-color: var(--color-foreground-primary);
  --button-focus-inner-ring-color: var(--color-background-secondary);
  --button-focus-outer-ring-color: var(--color-accent-primary);
}

%base-button-ghost {
  --button-bg-color: transparent;
  --button-fg-color: var(--color-foreground-secondary);
  --button-hover-bg-color: var(--color-background-tertiary);
  --button-hover-fg-color: var(--color-accent-primary);
  --button-active-bg-color: var(--color-background-quaternary);
  --button-active-fg-color: var(--color-accent-primary);
  --button-disabled-bg-color: transparent;
  --button-disabled-fg-color: var(--color-accent-primary-muted);
  --button-focus-bg-color: transparent;
  --button-focus-fg-color: var(--color-foreground-secondary);
  --button-focus-inner-ring-color: transparent;
  --button-focus-outer-ring-color: var(--color-accent-primary);
}

%base-button-destructive {
  --button-bg-color: var(--color-accent-error);
  --button-fg-color: var(--color-foreground-primary);
  --button-hover-bg-color: var(--color-background-error);
  --button-hover-fg-color: var(--color-foreground-primary);
  --button-active-bg-color: var(--color-accent-error);
  --button-active-fg-color: var(--color-foreground-primary);
  --button-disabled-bg-color: var(--color-background-error);
  --button-disabled-fg-color: var(--color-accent-error);
  --button-focus-bg-color: var(--color-accent-error);
  --button-focus-fg-color: var(--color-foreground-primary);
  --button-focus-inner-ring-color: var(--color-background-primary);
  --button-focus-outer-ring-color: var(--color-accent-primary);

  &:active,
  &[aria-pressed="true"] {
    box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 0.2);
  }
}