@fylgja/base/btn-class-less.css

Base provides a streamlined starting point for any web project. It’s a collection of class-less solutions, allowing you to focus on building your site.

/**
 * Fylgja (https://fylgja.dev)
 * Licensed under MIT Open Source
 */
:where(button, [type=button], [type=submit], [type=reset]),
::file-selector-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--btn-gap, 0.5em);
  padding-block: var(--btn-py, 0.375rem);
  padding-inline: var(--btn-px, 0.8rem);
  border-radius: var(--btn-radius, 0.5rem);
  border-width: var(--btn-border-width, 2px);
  border-color: var(--btn-stroke);
  background: var(--btn-bg, transparent);
  color: var(--btn-color, currentcolor);
  font-weight: var(--btn-font-weight, 500);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, var(--outline-transition);
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:where(button, [type=button], [type=submit], [type=reset]) {
  vertical-align: middle;
}

:where(button, [type=button], [type=submit], [type=reset]):hover,
::file-selector-button:hover {
  border-color: var(--btn-hover-stroke, var(--btn-stroke));
  background-color: var(--btn-hover-bg, var(--btn-bg, color-mix(in srgb, currentcolor, transparent 86%)));
  color: var(--btn-hover-color, var(--btn-color, currentcolor));
}

:where(button, [type=button], [type=submit], [type=reset]):is(:active, [aria-current=page], [aria-current=true], [aria-selected=true], :where(:has(input:checked))) {
  border-color: var(--btn-active-stroke, var(--btn-stroke));
  background-color: var(--btn-active-bg, var(--btn-bg, color-mix(in srgb, currentcolor, transparent 78%)));
  color: var(--btn-active-color, var(--btn-color, currentcolor));
}

:where(button, [type=button], [type=submit], [type=reset]):is(:disabled [aria-disabled=true]),
:disabled::file-selector-button {
  box-shadow: none;
  border-color: var(--btn-disabled-stroke);
  background-color: var(--btn-disabled-bg, color-mix(in srgb, var(--root-bg) 90%, var(--root-fg)));
  color: var(--btn-disabled-color, color-mix(in srgb, var(--root-fg) 40%, var(--root-bg)));
  cursor: not-allowed;
}