:root{ --input_height: 24px }


:is(button, input, select, textarea, a[btn]):not([null]) {
  &[css] {
    box-sizing: border-box;
    position: relative;
    text-decoration: none;
    border: var(--i_px_override, 1px) solid var(--i_border_override);
    margin: 0;
    outline: 0; }

  &:not(:disabled){ cursor: pointer; }
  &:disabled {
    cursor: not-allowed;
    filter: none;
    opacity: .58;}
    &:disabled::selection{
      background-color: transparent; }

  &:active:not(input, select, textarea) {filter: brightness(.88) }

  &[btn] {
    --i_color_override: var(--c_override, var(--btn_color));
    --i_bg_override: var(--bg_override, var(--btn_background));
    --i_border_override: var(--b_override, var(--btn_color)); }
  &:not([btn]) {
    --i_color_override: var(--c_override, var(--reverse));
    --i_bg_override: var(--bg_override, var(--btn_fff_777));
    --i_border_override: var(--b_override, var(--btn_000_777)); }
}



  :is(select, input, button, a[btn])[css]:not([null]) {
    white-space: nowrap;
    border-radius: 3px;
    height: clamp(
      var(--h_override, var(--input_height)),
      var(--h_override, var(--input_height)),
      var(--h_override, var(--input_height)) ) }


/* Write */
  :is(textarea, [type="date"], [type="email"], [type="password"], [type="text"], [type="number"])[css] {
    color-scheme: light;
    padding-inline: 10px;
    width: -webkit-fill-available;
    color: #000;
    background: #eee;}









select[css] {
  font-family: monospace;
  font-size: 14px;
  color: var(--i_color_override);
  padding-inline: 5px;
  background: var(--i_bg_override);
  width: var(--w_override, max-content);
  optgroup{
    background: #000;
    color: var(--theme_fff); }
  option {
    text-transform: capitalize;
    color: #000;
    background: #ddd;} }



textarea {
  width: -webkit-fill-available;
  scrollbar-color: var(--reverse) #aaa;
  overflow: hidden scroll;
  min-height: calc(var(--input_height) * 3);
  resize: vertical;
  &::-webkit-resizer {
    border: 4px solid #aaa;
    background: var(--reverse);} }



[type="color"] {
  --h_override: calc(var(--input_height) - 2px);
  appearance: none;
  outline: 1px solid var(--btn_000_777) !important;
  border: 3px solid #000 !important;
  &::-webkit-color-swatch-wrapper { padding: 0 }
  &::-webkit-color-swatch{ border: unset } }



:is(input[type="color"], [type="checkbox"].null ){
  --c_override: var(--reverse);
  block-size: var(--h_override, var(--input_height));
  inline-size: var(--h_override, var(--input_height));
  aspect-ratio: 1;
  padding: 0;
  flex-shrink: 0;
}



a[btn][href^="https://"]:not([href*="extaas.ee"]):not(:hover)::after{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent red transparent transparent;
  right: 1px;
  top: 1px;
  position: absolute;
  border-radius: 2px; }



:is(button, [type="button"], [type="submit"], a)[btn] {
  --input_color: var(--c_override, var(--btn_color));
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 1px;
  padding: var(--p_override, 5px 10px);
  width: var(--w_override, max-content);
  color: var(--input_color);
  background: var(--b_override, var(--btn_background));
  border: 1px solid var(--input_color);
  &:is(:hover, .active, :focus-visible):not(:disabled){
    background: var(--input_color);
    color: var(--base) }
}

:is(a[btn], button):has(svg:first-child:last-child, [icon]){
  --p_override: 0;
  aspect-ratio: 1;
  border: 1px solid var(--input_color);
  vertical-align: middle;
  justify-content: center;
  padding: 0; }






/* Checkbox Style (special) */
  input[type="checkbox"][null] {
    aspect-ratio: 1;
    margin: 0;
    accent-color: var(--theme_000); }

  [type="checkbox"]:not([null]) {
    --b_override: #888;
    --space: 2px;
    --ball: calc(var(--input_height) - var(--space) * 2 - 2px);
    --move: calc(var(--input_height) / 2); /* kogu trikk */
    font-size: calc(var(--ball) / 2);
    appearance: none;
    position: relative;
    height: var(--input_height) !important;
    width: calc(var(--input_height) + var(--move)) !important;
    background: #000;

    &::after {
      content: '✕'; /* ✕ */
      position: absolute;
      top: 50%;
      left: var(--space);
      transform: translate(0, -50%);
      transition: .3s;
      height: var(--ball);
      width: var(--ball);
      border-radius: 2px;
      text-align: center;
      align-content: center;
      color: var(--reverse);
      background: palevioletred;
      box-shadow: inset 0 0 0 1px #000; }

    &:checked::after {
      content: "✓"; /* ✓ */
      transform: translate(var(--move), -50%);
      background: palegreen; }

    &:hover::after{
      filter: brightness(0.8); } }