sass-site/source/assets/sass/components/_buttons.scss

@use 'sass:color';
@use '../visual-design/typography';

.sl-c-button {
  align-items: center;
  border: 0;
  border-radius: var(--radius-button, var(--sl-border-radius--large));
  background: var(--color-button-background, var(--sl-color--iron));
  box-shadow: 0 2px 1px var(--sl-color--shadow);
  color: var(--color-button-text, var(--sl-color--highlight));
  cursor: pointer;
  display: var(--display-button, inline-flex);
  font-weight: var(--font-weight-button);
  justify-content: center;
  margin: 0;
  padding: var(--sl-gutter--minus) var(--sl-gutter);

  &:hover,
  &:focus {
    --color-button-text: var(--sl-color--action);
    --color-button-background: var(--sl-color--link-action);
  }

  &:active {
    --color-button-text: var(--sl-color--active);
  }

  &--primary {
    --color-button-background: var(--sl-color--highlight);

    &,
    &:hover,
    &:focus,
    &:active {
      --color-button-text: var(--sl-color--white);
    }

    &:hover,
    &:focus {
      --color-button-background: var(--sl-color--action);
    }

    &:active {
      --color-button-background: var(--sl-color--active);
    }
  }

  &--tab {
    --color-button-background: var(
      --color-tab-background,
      var(--sl-color--code-background-darker)
    );
    --color-button-text: var(
      --color-button-tab-active,
      var(--sl-color--highlight)
    );
    --font-weight-button: #{typography.$sl-font-weight--bold};
    --radius-button: 0;

    box-shadow: none;

    &:hover {
      background: var(--color-tab-background-hover, transparent);

      --color-button-text: var(
        --color-tab-hover,
        var(--sl-color--midnight-blue)
      );
    }

    &:focus {
      --color-button-background: var(
        --color-tab-background,
        --sl-color--code-background
      );

      color: var(--color-tab-focus, var(--sl-color--highlight));
    }
  }

  &:has(.caps) {
    --display-button: inline;
  }
}