:where(html) {

  --scrollthumb-color: var(--grey-7);
  
  /* Link Decoration */
  --link-decoration: underline;
  --link-decoration-hover: underline;
  --link-decoration-active: underline;
  --link-decoration-none: none;

  /* Link Color */
  --link-color: var(--accent);
  --link-hover-color: var(--accent-tint);
  --link-active-color: var(--accent-shade);
  --link-visited-color: var(--accent-tint);
  --link-visited-hover-color: var(--accent-tint);
  --link-visited-active-color: var(--accent-shade);

  /* Link Background */
  --link-bg: var(--transparent);
  --link-hover-bg: var(--transparent);
  --link-active-bg: var(--transparent);
  --link-visited-bg: var(--transparent);
  --link-visited-hover-bg: var(--transparent);
  --link-visited-active-bg: var(--transparent);
}

a {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  background-color: var(--link-bg);
  -webkit-text-decoration-skip: objects;
  transition: color var(--transition-speed, 0.1s) var(--ease, ease-out);
  cursor: pointer;
}

a:hover,
a:focus {
  color: var(--link-hover-color);
  text-decoration: var(--link-hover-decoration);
  background-color: var(--link-hover-bg);
}

a:focus {
  outline: var(--outline-width) solid var(--outline-color);
}

a:active {
  color: var(--link-active-color);
  text-decoration: var(--link-active-decoration);
  background-color: var(--link-active-bg);
}

a:visited {
  color: var(--link-visited-color);
  text-decoration: var(--link-visited-decoration);
  background-color: var(--link-visited-bg);
}

a:visited:hover, 
a:visited:focus {
  color: var(--link-visited-hover-color);
  text-decoration: var(--link-visited-hover-decoration);
  background-color: var(--link-visited-hover-bg);
}

a:visited:active {
  color: var(--link-visited-active-color);
  text-decoration: var(--link-visited-active-decoration);
  background-color: var(--link-visited-active-bg);
}
:where(
  .btn,
  a.btn,
  button,
  input:is([type="button"],[type="submit"],[type="reset"]) ),
  :where(input[type="file"])::-webkit-file-upload-button,
  :where(input[type="file"])::file-selector-button {

  --button-text-size-s: var(--body-text-size-xs);
  --button-text-size-m: var(--body-text-size-s);
  --button-text-size-l: var(--body-text-size-m);
  --button-text-size-xl: var(--body-text-size-l);
  --button-text-weight: var(--weight-base);

  --button-text-size: var(--button-text-size-m);

  --button-bg: var(--transparent);
  --button-bg-shade: var(--accent-shade);
  --button-text-color: var(--accent);

  --button-border-width: var(--border-width-base);
  --button-border-color: var(--grey-3);
  --button-border-style: var(--border-style-base);
  --button-border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
  --button-border-radius: var(--border-radius-base);
  --button-shadow: none;
  --button-text-shadow: none;

  --button-content-gap: var(--space-xs);
  --button-padding-block: var(--space-xs);
  
  --button-icon-size-s:  var(--icon-size-s);
  --button-icon-size-m:  var(--icon-size-m);
  --button-icon-size-l:  var(--icon-size-l);
  --button-icon-size-xl: var(--icon-size-xl);
  --button-icon-size-h6: var(--icon-size-h6);
  --button-icon-size-h5: var(--icon-size-h5);
  --button-icon-size-h4: var(--icon-size-h4);
  --button-icon-size-h3: var(--icon-size-h3);
  --button-icon-size-h2: var(--icon-size-h2);
  --button-icon-size-h1: var(--icon-size-h1);

  --button-icon-bg: var(--button-bg);
  --button-icon-color: var(--button-text-color);
  --button-icon-size: var(--button-icon-size-m);

  /* Primary Button */
  --button-primary-bg: var(--accent);
  --button-primary-text-size: var(--button-text-size);
  --button-primary-text-color: var(--accent-contrast);
  --button-primary-border-width: var(--button-border-width);
  --button-primary-border-color: var(--accent);
  --button-primary-border-style: var(--button-border-style);
  --button-primary-border-radius: var(--button-border-radius);
  --button-primary-shadow: var(--button-shadow);
  --button-primary-text-shadow: var(--button-text-shadow);
  --button-primary-text-weight: var(--button-text-weight);
  --button-primary-border: var(--button-primary-border-width) var(--button-primary-border-style) var(--button-primary-border-color);

  /* Secondary Button */
  --button-secondary-bg: var(--accent);
  --button-secondary-text-size: var(--button-text-size);
  --button-secondary-text-color: var(--accent-contrast);
  --button-secondary-border-width: var(--button-border-width);
  --button-secondary-border-color: var(--accent);
  --button-secondary-border-style: var(--button-border-style);
  --button-secondary-border-radius: var(--button-border-radius);
  --button-secondary-shadow: var(--button-shadow);
  --button-secondary-text-shadow: var(--button-text-shadow);
  --button-secondary-text-weight: var(--button-text-weight);
  --button-secondary-border: var(--button-secondary-border-width) var(--button-secondary-border-style) var(--button-secondary-border-color);

  font-size: var(--button-text-size);
  font-weight: var(--button-text-weight);
  background: var(--button-bg);
  color: var(--button-text-color);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-shadow);
  text-shadow: var(--button-text-shadow);

  flex-shrink: 0;
  white-space: nowrap;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--button-content-gap);
  
  padding-block: var(--button-padding-block);
  padding-inline: calc(var(--button-padding-block) * 2);

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

  /* @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),
      box-shadow 145ms var(--ease-4),
      outline-offset 145ms var(--ease-4);
  }
}

:where(a.btn) {
  --button-border-color: var(--transparent);
}

:where(
  .btn,
  a.btn,
  button,
  input:is([type="button"],[type="submit"],[type="reset"]) ) {

  &:where(.primary) {
    font-size:     var(--button-primary-text-size);
    font-weight:   var(--button-primary-text-weight);
    background:    var(--button-primary-bg);
    color:         var(--button-primary-text-color);
    border:        var(--button-primary-border);
    border-radius: var(--button-primary-border-radius);
    box-shadow:    var(--button-primary-shadow);
    text-shadow:   var(--button-primary-text-shadow);
  }

  &:where(.secondary) {
    font-size:     var(--button-secondary-text-size);
    font-weight:   var(--button-secondary-text-weight);
    background:    var(--button-secondary-bg);
    color:         var(--button-secondary-text-color);
    border:        var(--button-secondary-border);
    border-radius: var(--button-secondary-border-radius);
    box-shadow:    var(--button-secondary-shadow);
    text-shadow:   var(--button-secondary-text-shadow);
  }
  
  &:where(.circle) {
    padding: var(--space-xs);
    border-radius: var(--border-radius-circle);
    aspect-ratio: var(--ratio-square);
  }

  &:where(.short) {
    --button-padding-block: var(--space-xxs);
  }

  &:where(.borderless) {
    --button-border-color: var(--transparent);
  }

  /* disabled */
  &:where([disabled]) {
    --button-bg: var(--disabled);
    --button-text-color: var(--disabled-contrast);
    --button-shadow: none;
    cursor: not-allowed;

    /* @media (--OSdark) {
      --body-text-color: var(--gray-5);
    } */
  }

  /* pressing */
  &:where(:hover) {
    --button-border-color: var(--accent);
    --button-shadow: var(--elevation-2);
    transition-duration: .25s;
  }

  &:where(.primary:hover) {
    --button-border-color: var(--accent);
    --button-shadow: var(--elevation-2);
    transition-duration: .25s;
  }

  &:where(:active) {
    --button-border-color: var(--accent);
    --button-shadow: var(--elevation-base);
    --button-bg: var(--accent-shade);
    transition-duration: .25s;
  }

  &:where(:focus) {
    outline: var(--outline-width) solid var(--outline-color);
    transition-duration: .25s;
  }

  &:where(.narrow) {
    padding-inline: var(--space-xs);
  }

  /* icons */
  & > :where(svg) {
    flex-shrink: 0;
    filter: drop-shadow(var(--button-text-shadow));
    block-size: var(--button-icon-size, var(--button-icon-size-l));
    font-size: var(--button-icon-size, inherit);
    height: var(--button-icon-size, 100%);
  }

  & > :where(svg > *){
    background-color: var(--button-icon-bg);
    stroke: var(--button-icon-color);
    stroke-width: var(--stroke-width, var(--border-width-thin));
    /* font-size: var(--button-icon-size, inherit);
    height: var(--button-icon-size, 100%); */
  }
}



/* :where(a.btn:not(:hover), a.btn:not(:active)) {
  --button-border-color: var(--transparent);
} */

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

/* red reset */
:where([type="reset"]) {
  --button-text-color: var(--danger);
  --button-border-color: var(--danger);

  &:focus-visible {
    outline: var(--outline-width) solid var(--outline-color);
  }

  /* @media (--OSdark) {
    --body-text-color: 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] ) {
  --button-border-color: currentColor;
}

/* file input */
:where(input[type="file"]) {
  max-inline-size: 100%;
  padding: var(--space-none);
  cursor: initial;
  align-self: flex-start;
  border-radius: var(--button-border-radius);
  border: var(--button-border-width) var(--button-border-style) var(--button-border-color); 
  box-shadow: var(--button-shadow);
  color: var(--button-text-color);
}

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

sl-button:has(iconify-icon.icon-xl)::part(label) {
  display: inline-flex;
  align-items: center;
}

sl-button:has(iconify-icon.icon-l)::part(label) {
  display: inline-flex;
  align-items: center;
}

.drag-image {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: var(--space-xs) var(--space-m);
  width: max-content;
  max-width: 320px;
  background-color: var(--white);
  border: 2px solid var(--blue);
  border-radius: var(--border-radius-pill);
  color: var(--body-text-color);
  font-size: var(--body-text-size-m);
  line-height: var(--body-text-line-height-m);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--layer-top);
  text-overflow: ellipsis;
}

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

/* .btn { */
  /* Structure */
  /* display: inline-block;
  line-height: normal;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  box-sizing: border-box;
  } */

  /* Firefox: Get rid of the inner focus border */
  /* .btn::-moz-focus-inner {
      padding: 0;
      border: 0;
  } */

  /* Inherit .pure-g styles */
  /* .btn-group { */
      /*letter-spacing: -0.31em;*/ /* Webkit: collapse white-space between units */
      /*text-rendering: optimizespeed;*/ /* Webkit: fixes text-rendering: optimizeLegibility */
  /* } */

  /* .opera-only :-o-prefocus,
  .btn-group {
      word-spacing: -0.43em;
  } */

  /* .btn-group .btn {
      letter-spacing: normal;
      word-spacing: normal;
      vertical-align: top;
      text-rendering: auto;
  } */

  body::-webkit-scrollbar {
    width: var(--scrollbar-width, var(--space-m)); /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color, var(--body-bg)); /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color, var(--grey)); /* color of the scroll thumb */
    border-radius: var(--scrollbar-border-radius, 20px); /* roundness of the scroll thumb */
    border: var(--scrollbar-border, 3px solid var(--body-bg)); /* creates padding around scroll thumb */
  }

  body {
    scrollbar-width: var(--scrollbar-width, auto); /* "auto" or "thin" */
    scrollbar-color: var(--scrollbar-thumb-color, var(--grey)) var(--scrollbar-track-color, var(--body-bg)) /* scroll thumb and track */ 
  }