@utility button-* {
  padding-inline: calc(--value(--button-size-*) * var(--button-px-mul));
  height: --value(--button-size-*);
  gap: calc(--value(--button-size-*) * var(--button-px-gap-mul));
  box-sizing: border-box;
  padding-block: calc(var(--spacing) * 2);

  /* Resize spacing when button contains SVG icon */
  &:has(> svg) {
    padding-inline: calc(--value(--button-size-*) * var(--button-px-icon-mul));
  }
}

@utility button-icon-* {
  height: --value(--button-size-*);
  width: --value(--button-size-*);
  padding-inline: calc(--value(--button-size-*) * var(--button-px-icon-mul));
}

@utility bg-scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    color-mix(
        in srgb,
        currentColor calc(var(--scanlines-opacity) * 100%),
        transparent
      )
      2px,
    color-mix(
        in srgb,
        currentColor calc(var(--scanlines-opacity) * 100%),
        transparent
      )
      4px
  );
  background-clip: padding-box;
}

@utility bg-scanlines-vertical {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    color-mix(
        in srgb,
        currentColor calc(var(--scanlines-opacity) * 100%),
        transparent
      )
      2px,
    color-mix(
        in srgb,
        currentColor calc(var(--scanlines-opacity) * 100%),
        transparent
      )
      4px
  );
  background-clip: padding-box;
}

@utility bg-grid {
  --grid-color: color-mix(
    in srgb,
    currentColor calc(var(--grid-opacity) * 100%),
    transparent
  );
  background-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--grid-size),
      var(--grid-color) var(--grid-size),
      var(--grid-color) calc(var(--grid-size) + var(--grid-border-width))
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent var(--grid-size),
      var(--grid-color) var(--grid-size),
      var(--grid-color) calc(var(--grid-size) + var(--grid-border-width))
    );
  background-size:
    100% calc(var(--grid-size) + var(--grid-border-width)),
    calc(var(--grid-size) + var(--grid-border-width)) 100%;
  background-repeat: repeat;
  background-position: 0 0;
  background-clip: padding-box;
}

@utility bg-stripes {
  --stripe-color: color-mix(
    in srgb,
    currentColor calc(var(--grid-opacity) * 100%),
    transparent
  );
  position: relative;
  overflow: hidden;

  & > [data-slot^="card-"] {
    margin-inline: var(--stripe-inset);
  }

  & > [data-slot^="card-"]:first-child {
    margin-top: var(--stripe-inset);
  }

  & > [data-slot^="card-"]:last-child {
    margin-bottom: var(--stripe-inset);
  }

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent var(--stripe-gap-size),
      var(--stripe-color) var(--stripe-gap-size),
      var(--stripe-color) var(--stripe-size)
    );
    mask-image:
      linear-gradient(
        to right,
        black 0,
        black var(--stripe-border-size),
        transparent var(--stripe-border-size),
        transparent calc(100% - var(--stripe-border-size)),
        black calc(100% - var(--stripe-border-size))
      ),
      linear-gradient(
        to bottom,
        black 0,
        black var(--stripe-border-size),
        transparent var(--stripe-border-size),
        transparent calc(100% - var(--stripe-border-size)),
        black calc(100% - var(--stripe-border-size))
      );
    mask-composite: add;
    -webkit-mask-composite: source-over;
    pointer-events: none;
    z-index: 0;
  }
}