/**********/
/* BASICS */
/**********/

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

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

button:focus-visible,
input:focus-visible  {
  outline:solid .1em var(--outline-link);
}





/*****************/
/* BUTTON SQUARE */
/*****************/

.button--square {
  position:relative;
  z-index: 1;

  width:2em;
  height:2em;
  padding:0;

  display:grid;
  place-content:center;
  place-items:center;

  appearance:none;
  color:var(--clr-button--square);
  background-color: var(--bg-button-square);
  border:solid 1px currentColor;
  font-size:1em;
}

.button--square > * {
  grid-area:1/1;
  display:block;
}

@media only print {
  .button--square {
    display:none;
  }
}





/*****************/
/* RADIO SETTING */
/*****************/

.radio-setting {
  display:inline-flex;
  align-items:center;
  gap:.25em;
  padding:.05em .25em .05em 0;
}

.radio-setting input {
  margin:0;
  font-size:1em;
  cursor: pointer;
}

/* focus */
.radio-setting:has( :focus-visible ) input {
  outline:none;
}

.radio-setting:has( :focus-visible ) {
  outline:solid .1rem var(--accent-color);
  outline-offset:.2rem;
}





/*****************/
/* RANGE SETTING */
/*****************/

.range-setting {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 .5em;
}

.range-setting[hidden] {
  display:none;
}

@supports (aspect-ratio:1) {
  .range-setting[hidden] {
    display:flex;
  }
}

.range-setting span {
  order:-1;
  flex-basis:100%;
}

.range-setting::before {
  content:attr(data-icon-start);
  font-size:1.5em;
}

.range-setting::after {
  content:attr(data-icon-end);
  font-size:1.5em;
}

.range-setting input {
  width:1em;
  flex-grow:1;
  z-index:1;
  font-size:1em;
  margin:0;
  padding:.25em 0;
  cursor: pointer;
}

.range-setting input:focus-visible {
  outline:solid .1rem var(--accent-color);
  outline-offset:.2rem;
}