@use "../../../styles/base/utilities.scss";

[data-fs-buy-button] {
  // --------------------------------------------------------
  // Design Tokens for Buy Button
  // --------------------------------------------------------

  // Default properties
  --fs-buy-button-text-color                        : var(--fs-color-action-text);
  --fs-buy-button-text-color-hover                  : var(--fs-color-action-text);
  --fs-buy-button-text-color-active                 : var(--fs-color-action-text);

  --fs-buy-button-bkg-color                         : var(--fs-color-action-bkg);
  --fs-buy-button-bkg-color-hover                   : var(--fs-color-action-bkg-hover);
  --fs-buy-button-bkg-color-active                  : var(--fs-color-action-bkg-active);

  --fs-buy-button-border-color                      : var(--fs-buy-button-bkg-color);
  --fs-buy-button-border-color-hover                : var(--fs-buy-button-bkg-color-hover);
  --fs-buy-button-border-color-active               : var(--fs-buy-button-bkg-color-active);

  --fs-buy-button-shadow-hover                      : var(--fs-button-shadow-hover);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  @include utilities.focus-ring-visible;

  color: var(--fs-buy-button-text-color);

  [data-fs-button-wrapper] {
    background-color: var(--fs-buy-button-bkg-color);
    border: var(--fs-button-border-width) solid var(--fs-buy-button-border-color);
  }

  &:hover [data-fs-button-wrapper] {
    color: var(--fs-buy-button-text-color-hover);
    background-color: var(--fs-buy-button-bkg-color-hover);
    border-color: var(--fs-buy-button-border-color-hover);
    box-shadow: var(--fs-buy-button-shadow-hover);
  }

  &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
    color: var(--fs-buy-button-text-color-hover);
    background-color: var(--fs-buy-button-bkg-color-hover);
  }

  &:active [data-fs-button-wrapper] {
    color: var(--fs-buy-button-text-color-hover);
    background-color: var(--fs-buy-button-bkg-color-active);
    border-color: var(--fs-buy-button-border-color-active);
    outline: none;
  }
}