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

@use 'sass:color';
@use '../functions';
@use '../visual-design/theme';
@use '../config/color/brand';

.sl-c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0 {
    /* stylelint-disable-next-line property-no-unknown */
    radius: functions.sl-px-to-rem(4px);
  }
  padding: var(--gutter-minus) var(--gutter);
  background: var(--color-button-bg, var(--sl-color-iron));
  box-shadow: 0 2px 1px var(--shadow);
  color: var(--color-button-text, var(--highlight));
  cursor: pointer;

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

  &:active {
    --color-button-text: color.adjust(brand.$sl-color--venus, $lightness: -10%);
  }

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

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

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

    &:active {
      background-color: color.adjust(brand.$sl-color--venus, $lightness: -10%);
    }
  }
}