open-props/src/extra/buttons.css

@import "../props.media.css";
@import "../props.gray-hsl.css";

:where(button,input:is([type="button"],[type="submit"],[type="reset"])),
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
  --_accent: initial /* your color */;
  --_text: initial /* your text color */;
  --_size: initial /* your size */;
  
  --_bg-light: white;
  --_bg-dark: var(--surface-3);
  --_bg: var(--_bg-light);
  
  --_border: var(--surface-3);
  
  --_highlight-size: 0;
  --_highlight-light: hsl(var(--gray-5-hsl) / 25%);
  --_highlight-dark: hsl(var(--gray-12-hsl) / 25%);
  --_highlight: var(--_highlight-light);
  
  --_ink-shadow-light: 0 1px 0 var(--gray-3);
  --_ink-shadow-dark: 0 1px 0 var(--surface-1);
  --_ink-shadow: var(--_ink-shadow-light);
  
  --_icon-size: 2ch;
  --_icon-color: var(--_accent, var(--link));
  
  font-size: var(--_size);
  background: var(--_bg);
  color: var(--_text);
  border: var(--border-size-2) solid var(--_border);
  box-shadow: 
    var(--shadow-2),
    0 1px var(--surface-3),
    0 0 0 var(--_highlight-size) var(--_highlight)
  ;
  text-shadow: var(--_ink-shadow);
  
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--size-2);
  
  font-weight: var(--font-weight-7);
  border-radius: var(--radius-2);
  padding-block: .75ch;
  padding-inline: 1.75ch;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  
  transition: border-color .5s var(--ease-3) 3s;

  @media (--OSdark) {
    --_highlight: var(--_highlight-dark);
    --_bg: var(--_bg-dark);
    --_ink-shadow: var(--_ink-shadow-dark);
  }

  @media (--motionOK) {
    transition:
      border-color .5s var(--ease-3) 3s,
      box-shadow 145ms var(--ease-4),
      outline-offset 145ms var(--ease-4);
  }
}

:where(button,input:is([type="button"],[type="submit"],[type="reset"])) {
  /* disabled */
  &[disabled] {
    --_bg: none;
    --_text: var(--gray-6);
    cursor: not-allowed;
    box-shadow: var(--shadow-1);

    @media (--OSdark) {
      --_text: var(--gray-5);
    }
  }

  /* pressing */
  &:where(:not(:active):hover) {
    --_highlight-size: var(--size-2);
    transition-delay: 0s;
    transition-duration: .25s;
  }

  /* icons */
  & > :where(svg) {
    flex-shrink: 0;
    filter: drop-shadow(var(--_ink-shadow));
    block-size: var(--_icon-size);
    inline-size: var(--_icon-size);
  }

  & > :where(svg > *) {
    stroke: var(--_icon-color);
    stroke-width: var(--border-size-2);
  }
}

/* adaptive indigo text */
:where([type="submit"], form button:not([type],[disabled])) {
  --_text: var(--_accent, var(--link));
} 

/* red reset */
:where([type="reset"]) {
  --_text: var(--red-6);
  --_border: var(--red-3);

  &:focus-visible {
    outline-color: var(--red-6);
  }

  @media (--OSdark) {
    --_text: var(--red-2);
    --_border: var(--surface-3);
  }
}

/* submit, form > button, reset matching hover border color */
:where([type="submit"], [type="reset"], form button:not([type])):is(:hover, :focus-visible):not([disabled]) {
  --_border: currentColor;
}

/* file input */
:where(input[type="file"]) {
  max-inline-size: 100%;
  padding: 0;
  cursor: initial;
  align-self: flex-start;
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--surface-2); 
  box-shadow: var(--inner-shadow-4);
  color: var(--text-2);
}

:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
  margin-inline-end: 1.75ch;
  cursor: pointer;
}

/* special dark theme styles */
@media (--OSdark) {
  :where([type="submit"]),
  :where(form button:not([type="button"])),
  :where([type="reset"]), 
  :where([disabled]) {
    --_bg: var(--surface-1);
  }
}