:root {
    --btns-button-radius: var(--radius-md);
    --btns-button-padding-x: var(--space-sm);
    --btns-button-padding-y: var(--space-2xs);
  }
  
  .btns { 
    border: 1px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    border-radius: var(--radius-md);
  }
  .btns > *:first-child, .btns *:first-child .btns__btn {
    border-radius: var(--btns-button-radius) 0 0 var(--btns-button-radius);
  }
  .btns > *:last-child, .btns *:last-child .btns__btn {
    border-radius: 0 var(--btns-button-radius) var(--btns-button-radius) 0;
  }
  
  .btns[class*=gap-4xs] .btns__btn, .btns[class*=gap-3xs] .btns__btn, .btns[class*=gap-2xs] .btns__btn, .btns[class*=gap-xs] .btns__btn, .btns[class*=gap-sm] .btns__btn, .btns[class*=gap-md] .btns__btn, .btns[class*=gap-lg] .btns__btn, .btns[class*=gap-xl] .btns__btn, .btns[class*=gap-2xl] .btns__btn, .btns[class*=gap-3xl] .btns__btn, .btns[class*=gap-4xl] .btns__btn {
    border-radius: var(--btns-button-radius) !important;
  }
  
  /* single button */
  .btns__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--btns-button-padding-y) var(--btns-button-padding-x);
    background-color: var(--color-bg);
    font-weight: 500;
    transition: 0.2s;
    cursor: pointer;
  }
  .btns__btn:hover:not(.btns__btn--selected) {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  }
  .btns__btn:focus {
    z-index: 1;
    outline: none;
    box-shadow: 0 0 0 2px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
  }
  
  .btns__btn--selected, .btns--radio input[type=radio]:checked + label,
  .btns--radio input[type=checkbox]:checked + label, .btns--checkbox input[type=radio]:checked + label,
  .btns--checkbox input[type=checkbox]:checked + label { /* selected style */
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
    box-shadow: var(--shadow-sm);
  }
  
  .btns__btn--disabled {
    opacity: 0.7;
    cursor: not-allowed;
    text-decoration: line-through;
  }
  
  /* --radio, --checkbox */
  .btns--radio > *, .btns--checkbox > * {
    position: relative;
  }
  .btns--radio input[type=radio],
  .btns--radio input[type=checkbox], .btns--checkbox input[type=radio],
  .btns--checkbox input[type=checkbox] {
    /* hide native buttons */
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
  }
  .btns--radio input[type=radio] + label,
  .btns--radio input[type=checkbox] + label, .btns--checkbox input[type=radio] + label,
  .btns--checkbox input[type=checkbox] + label {
    -webkit-user-select: none;
            user-select: none;
  }
  .btns--radio input[type=radio]:focus + label,
  .btns--radio input[type=checkbox]:focus + label, .btns--checkbox input[type=radio]:focus + label,
  .btns--checkbox input[type=checkbox]:focus + label {
    z-index: 1;
    box-shadow: 0 0 0 2px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
  }
  .btns--radio input[type=radio]:checked + label,
  .btns--radio input[type=checkbox]:checked + label, .btns--checkbox input[type=radio]:checked + label,
  .btns--checkbox input[type=checkbox]:checked + label {
    color: var(--color-primary);
  background-color: hsla(
    var(--color-primary-h), 
    var(--color-primary-s), 
    var(--color-primary-l),
    0.1
    );
  }
  
  .btns__btn--icon {
    padding: var(--btns-button-padding-y);
  }
  .btns__btn--icon .icon {
    display: block;
  }