@property --radius {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.button:where(:not([disabled])) {
  --button-font-weight: 400;
  --button-font-family: var(--font-mono);
  --button-icon-background-radius: 3px;

  border: 0; /* Fixes a rendering bug in Blink and Webkit where background-image cross over and is visible in transparent border. */
  text-transform: uppercase;
  gap: 12px;
  width: max-content;

  @media (forced-colors: active) {
    background-image: none;
    border: solid 1px transparent;
  }

  :is(.fieldset, .details, .views-exposed-form) & {
    border: solid 1px var(--theme-border-color-soft);
  }
}

.button--primary {
  --button-icon-fill: var(--primary);
  --button-icon-fill-hover: var(--primary);
  --button-icon-fill-active: var(--primary);
  --button-icon-background-color: var(--black);
  --button-icon-background-color-hover: var(--black);
  --button-icon-background-color-active: var(--black);
}

.button--light:where(:not([disabled])) {
  --button-icon-fill: var(--black);
  --button-icon-fill-hover: var(--black);
  --button-icon-fill-active: var(--black);
  --button-icon-background-color: var(--primary);
  --button-icon-background-color-hover: var(--primary);
  --button-icon-background-color-active: var(--primary);
}

.button--dark:where(:not([disabled])) {
  --button-icon-fill: var(--black);
  --button-icon-fill-hover: var(--black);
  --button-icon-fill-active: var(--black);
  --button-icon-background-color: var(--primary);
  --button-icon-background-color-hover: var(--primary);
  --button-icon-background-color-active: var(--primary);
}

.button:where(:has(.button__prefix, .button__suffix):not([disabled])) {
  --radius: 0%;
  --radius-center: 0px;

  background-image: radial-gradient(ellipse 100% 300% at var(--radius-center), var(--button-icon-background-color-hover) var(--radius), transparent calc(var(--radius) + 2px));
  transition: scale 0.1s, background-color 0.2s, --radius 0.5s, color 0.5s;

  &:has(.button__prefix) {
    --radius-center: 18px center;
  }

  &:has(.button__suffix) {
    --radius-center: calc(100% - 18px) center;
  }

  &:active,
  &:hover {
    --radius: 120%;

    color: var(--button-icon-fill-hover);
  }
}

.button__prefix,
.button__suffix {
  --offset: 5px;

  margin: calc(-1 * var(--offset));
  height: calc(100% + var(--offset));

  svg {
    height: 70%;
  }
}

.button__prefix {
  margin-inline-end: 0;

  .button:has(&) {
    padding-inline-start: 12px
  }
}

.button__suffix {
  margin-inline-start: 0;

  .button:has(&) {
    padding-inline-end: 12px
  }
}

.button--arrow-up-right {
  column-gap: 8px;

  &::after {
    display: block;
    width: 20px;
    aspect-ratio: 1;
    mask-image: url('../../images/arrow-up-right-bold.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    content: "";
    background: currentColor;
  }
}