/************/
/* CONTROLS */
/************/

button, input, textarea, select {
  font-size:1em;
}


/********************/
/* BUTTON / SUMMARY */
/********************/

button,
summary {
  padding:.5em .67em;

  appearance:none;
  background-color:var(--bg-button);
  border:var(--border-thick);
  border-radius:.5em;
  outline:none;

  font-weight:600;
  color:var(--clr-button);
}

button:not([disabled], [inert]) {
  cursor:pointer;
}

summary::-webkit-details-marker {
  display: none;
}

/* interaction */
button:focus-visible,
summary:focus-visible {
  position: relative;
  z-index: 1;

  border-style:dashed;
}

button:disabled,
summary:disabled {
  color:var(--clr-button--disabled);
  border-color:var(--brdr-clr-button--disabled);
}


/***************************/
/* BUTTON TOGGLE / SUMMARY */
/***************************/

.button--disclosure,
summary {
  display:inline-flex;
  gap:.33em;
  align-items:baseline;
  justify-content:center;
}

/* marker */
.button--disclosure::after,
summary::after {
  content:"";
  display:block;
  width:.625rem;
  height:.5625rem;
  background-color:currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% .25rem;
}

/* interaction */
[data-reduced-motion="no-preference"] .button--disclosure::after,
[data-reduced-motion="no-preference"] summary::after {
  transition:transform .3s;
}

.is-open .button--disclosure::after,
[open] summary::after {
  transform:rotate(180deg);
}





/*********/
/* INPUT */
/*********/

input[type="radio"],
input[type="checkbox"] {
  cursor:pointer;
}

input:focus-visible {
  outline: var(--outline-thick--d);
  outline-offset:.15em;
}





/********/
/* LINK */
/********/

a {
  display:inline-block;
  color:var(--clr-link);

  text-decoration-thickness:.1em;;
  text-underline-offset:.15em;
}

a:focus-visible {
  position: relative;
  z-index: 1;
  
  background-color: var(--bg-outline);
  box-shadow:0 0 0 .15em var(--bg-outline);
  outline: .2rem solid var(--brdr-clr-outline);
  outline-offset: .15em;
}

a:hover{
  color: var(--link-hover);
}