@import "../colors.css";
@import "../spacing.css";
@import "../typography.css";

:root {
  --button-border-radius: 6px;
  --button-color: var(--color-white);
  --button-font-family: var(--title-font-family);
  --button-font-style: var(--title-font-style);
  --button-font-weight: bold;
  --button-letter-spacing: var(--letter-spacing);
  --button-user-select: none;

  --button-text-button-transform: lowercase;
  --button-text-button-first-letter-transform: uppercase;

  --button-default-font-size: 14px;
  --button-default-height: 32px;
  --button-default-padding: 0 var(--spacing-medium);

  --button-huge-font-size: 16px;
  --button-huge-height: 44px;
  --button-huge-padding: 0 48px;

  --button-tiny-font-size: 12px;
  --button-tiny-height: 26px;
  --button-tiny-padding: 0 var(--spacing-tiny);

  --button-high-relevance-background-color-hover: var(--color-barney-purple-50);
  --button-high-relevance-background-color-active: var(--color-barney-purple-200);
  --button-high-relevance-boxshadow-focus: var(--color-barney-purple-200) 0 0 0 2px inset;
  --button-high-relevance-flat-background-color: var(--color-barney-purple-100);
  --button-high-relevance-outline-color: var(--color-barney-purple-100);
  --button-high-relevance-outline-border-color: var(--color-barney-purple-100);
  --button-high-relevance-outline-border-width: 1px;
  --button-high-relevance-outline-color-enter: var(--color-white);
  --button-high-relevance-outline-background-color-focus: var(--color-barney-purple-100);
  --button-high-relevance-outline-border-color-focus: var(--color-barney-purple-200);
  --button-high-relevance-outline-boxshadow-focus: var(--color-barney-purple-200) 0 0 0 1px inset;
  --button-high-relevance-clean-color: var(--color-barney-purple-100);
  --button-high-relevance-clean-color-hover: var(--color-barney-purple-50);
  --button-high-relevance-clean-color-active: var(--color-barney-purple-200);
  --button-high-relevance-clean-color-focus: var(--color-barney-purple-50);

  --button-low-relevance-background-color-hover: var(--color-squanchy-gray-50);
  --button-low-relevance-background-color-active: var(--color-squanchy-gray-100);
  --button-low-relevance-boxshadow-focus: #979797 0 0 0 2px inset;
  --button-low-relevance-flat-background-color: var(--color-squanchy-gray-100);
  --button-low-relevance-outline-color: var(--color-birdperson-gray-500);
  --button-low-relevance-outline-border-color: var(--color-squanchy-gray-100);
  --button-low-relevance-outline-border-width: 1px;
  --button-low-relevance-outline-color-enter: var(--color-white);
  --button-low-relevance-outline-background-color-focus: var(--color-squanchy-gray-20);
  --button-low-relevance-outline-border-color-focus: #979797;
  --button-low-relevance-outline-boxshadow-focus: #979797 0 0 0 1px inset;
  --button-low-relevance-clean-color: var(--color-birdperson-gray-500);
  --button-low-relevance-clean-color-hover: var(--color-birdperson-gray-600);
  --button-low-relevance-clean-color-active: var(--color-birdperson-gray-700);
  --button-low-relevance-clean-color-focus: var(--color-birdperson-gray-600);

  --button-normal-relevance-background-color-hover: var(--color-picklerick-green-50);
  --button-normal-relevance-background-color-active: var(--color-picklerick-green-200);
  --button-normal-relevance-boxshadow-focus: var(--color-picklerick-green-200) 0 0 0 2px inset;
  --button-normal-relevance-flat-background-color: var(--color-picklerick-green-100);
  --button-normal-relevance-outline-color: var(--color-picklerick-green-100);
  --button-normal-relevance-outline-border-color: var(--color-picklerick-green-100);
  --button-normal-relevance-outline-border-width: 1px;
  --button-normal-relevance-outline-color-enter: var(--color-white);
  --button-normal-relevance-outline-background-color-focus: var(--color-picklerick-green-100);
  --button-normal-relevance-outline-border-color-focus: var(--color-picklerick-green-200);
  --button-normal-relevance-outline-boxshadow-focus: var(--color-picklerick-green-200) 0 0 0 1px inset;
  --button-normal-relevance-clean-color: var(--color-picklerick-green-100);
  --button-normal-relevance-clean-color-hover: var(--color-picklerick-green-50);
  --button-normal-relevance-clean-color-active: var(--color-picklerick-green-200);
  --button-normal-relevance-clean-color-focus: var(--color-picklerick-green-50);

  --button-disabled-background-color: var(--color-squanchy-gray-50);
  --button-disabled-color: var(--color-squanchy-gray-200);

  --button-icon-start-margin:
    0
    var(--spacing-tiny)
    0
    0;
  --button-icon-end-margin:
    0
    0
    0
    var(--spacing-tiny);
  --button-icon-padding: 0;
  --button-icon-width-tiny: 26px;
  --button-icon-width-default: 32px;
  --button-icon-width-huge: 44px;
  --butoon-icon-circle-border-radius: 50%;
  --button-only-icon-margin: 0;

  --button-ripple-active-opacity: 0.2;
  --button-ripple-background:
    radial-gradient(
      circle,
      rgba(0, 0, 0, 0.6) 10%,
      transparent 10.01%
    );
  --button-ripple-transition: transform 0.4s, opacity 1s;

  --button-inline-padding: 4px;
}