_mixin.scss

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */

@import "~@utrecht/link-css/src/mixin";
@import "~@utrecht/focus-ring-css/src/mixin";

@mixin utrecht-link-button {
  @include utrecht-link;
  @include utrecht-link--any-link;

  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);

  align-items: center;
  border-radius: var(--utrecht-button-border-radius, 0);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
  font-weight: var(--utrecht-button-font-weight);
  gap: var(--utrecht-button-icon-gap);
  inline-size: var(--utrecht-button-inline-size, auto);
  justify-content: center;
  line-height: inherit;
  min-block-size: var(--utrecht-button-min-block-size, 44px);
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
  padding-block-end: var(--utrecht-button-padding-block-end);
  padding-block-start: var(--utrecht-button-padding-block-start);
  padding-inline-end: var(--utrecht-button-padding-inline-end);
  padding-inline-start: var(--utrecht-button-padding-inline-start);
  text-transform: var(--utrecht-button-text-transform);
  -webkit-user-select: none;
  user-select: none;
}

@mixin utrecht-link-button--html-button {
  background-color: transparent;

  /* reset <button> styling */
  border-width: 0;
}

@mixin utrecht-link-button--pressed {
  /* Copy `active` styles for now.
  Later we can decide to:
  - merge `active` and `pressed` and name the state `pressed`, or:
  - merge `active` and `pressed` and name the state `active`, or:
  - style `pressed` like the link state `current`, or:
  - add `pressed` design tokens
  */
  @include utrecht-link--active;
}

@mixin utrecht-link-button--hover {
  @include utrecht-link--hover;
}

@mixin utrecht-link-button--active {
  @include utrecht-link--active;
}

@mixin utrecht-link-button--disabled {
  @include utrecht-link--placeholder;
}

@mixin utrecht-link-button--focus {
  @include utrecht-link--focus;
}

@mixin utrecht-link-button--focus-visible {
  @include utrecht-link--focus-visible;
}

@mixin utrecht-link-button--inline {
  --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);

  min-block-size: auto;
  min-inline-size: auto;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

@mixin utrecht-link-button__label {
  @include utrecht-link__label;
}