ui-variants{
    display:grid;
    grid-gap:var(--spacing-12);
    gap:var(--spacing-12);
  }
  ui-variants [ui-variant]{
    display:grid;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
  }
  ui-variants [ui-variant] .label{
    color:var(--color-on-surface-variant);
    font:var(--font-body-sm);
    text-transform:uppercase;
  }
  ui-variants [ui-variant] .options{
    display:flex;
    flex-wrap:wrap;
  }
  ui-variants [ui-variant] .options .opt{
    position:relative;
    font:var(--font-body-md);
  }
  ui-variants [ui-variant]:not([ui-variant=radio_buttons]) .options .opt > input[type=radio]{
    position:absolute;
    scale:0;
    opacity:0;
  }
  ui-variants [ui-variant][ui-variant=textual_buttons] .options{
    width:-moz-fit-content;
    width:fit-content;
    border:1px solid var(--color-surface-variant);
    position:relative;
  }
  ui-variants [ui-variant][ui-variant=textual_buttons] .options::before{
    content:"";
    inset:0;
    position:absolute;
    box-shadow:0 0 0 1px currentColor;
    height:anchor-size(height);
    width:anchor-size(width);
    bottom:anchor(bottom);
    left:anchor(left);
    z-index:2;
    position-anchor:--selected;
  }
  [dir="rtl"] ui-variants [ui-variant][ui-variant=textual_buttons] .options::before{
    right:anchor(right);
  }
  ui-variants [ui-variant][ui-variant=textual_buttons] .options .opt{
    display:flex;
    align-items:center;
    min-width:36px;
    height:36px;
    padding-inline:var(--spacing-12);
    transition:var(--transition-standard-default-effects);
    border-radius:var(--radius-button);
    cursor:pointer;
  }
  ui-variants [ui-variant][ui-variant=textual_buttons] .options .opt:not(:first-child){
    border-inline-start:1px solid var(--color-surface-variant);
  }
  ui-variants [ui-variant][ui-variant=textual_buttons] .options .opt:has(> input[type=radio]:checked){
    anchor-name:--selected;
  }
  ui-variants [ui-variant][ui-variant=textual_buttons] .options .opt:has(> input[type=radio]:disabled){
    opacity:0.5;
    background-color:var(--color-surface-container);
    pointer-events:none;
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options{
    width:-moz-fit-content;
    width:fit-content;
    border:1px solid var(--color-surface-variant);
    position:relative;
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options::before{
    content:"";
    inset:0;
    position:absolute;
    box-shadow:0 0 0 1px currentColor;
    height:anchor-size(height);
    width:anchor-size(width);
    bottom:anchor(bottom);
    left:anchor(left);
    z-index:2;
    position-anchor:--selected;
  }
  [dir="rtl"] ui-variants [ui-variant][ui-variant=color_base_buttons] .options::before{
    right:anchor(right);
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    transition:var(--transition-standard-default-effects);
    border-radius:var(--radius-button);
    cursor:pointer;
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt:not(:first-child){
    border-inline-start:1px solid var(--color-surface-variant);
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt::after{
    content:"";
    display:flex;
    width:18px;
    height:18px;
    background-color:var(--color-value);
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt:has(> input[type=radio]:checked){
    anchor-name:--selected;
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt:has(> input[type=radio]:disabled){
    pointer-events:none;
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt:has(> input[type=radio]:disabled)::before{
    content:"";
    position:absolute;
    width:1px;
    height:100%;
    rotate:35deg;
    filter:invert(1);
    background-color:var(--color-value);
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt:has(> input[type=radio]:disabled)::after{
    background-color:color-mix(in srgb, var(--color-value) 50%, transparent);
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options{
    width:-moz-fit-content;
    width:fit-content;
    border:1px solid var(--color-surface-variant);
    position:relative;
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options::before{
    content:"";
    inset:0;
    position:absolute;
    box-shadow:0 0 0 1px currentColor;
    height:anchor-size(height);
    width:anchor-size(width);
    bottom:anchor(bottom);
    left:anchor(left);
    z-index:2;
    position-anchor:--selected;
  }
  [dir="rtl"] ui-variants [ui-variant][ui-variant=image_based_buttons] .options::before{
    right:anchor(right);
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
    border-radius:var(--radius-button);
    padding:var(--spacing-6);
    cursor:pointer;
    font:var(--font-body-sm);
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt:not(:first-child){
    border-inline-start:1px solid var(--color-surface-variant);
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt .image{
    display:flex;
    position:relative;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    overflow:hidden;
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt .image > img{
    width:100%;
    height:100%;
    border-radius:var(--radius-button);
    -o-object-fit:cover;
       object-fit:cover;
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt:has(> input[type=radio]:checked){
    anchor-name:--selected;
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt:has(> input[type=radio]:disabled){
    pointer-events:none;
    opacity:0.5;
  }
  ui-variants [ui-variant][ui-variant=radio_buttons] .options{
    display:flex;
    flex-wrap:wrap;
    gap:var(--spacing-8);
  }
  ui-variants [ui-variant][ui-variant=radio_buttons] .options .opt{
    display:flex;
    align-items:center;
    cursor:pointer;
    gap:var(--spacing-8);
    padding:var(--spacing-8);
    border:1px solid var(--color-surface-variant);
    color:var(--color-on-surface-variant);
  }
  ui-variants [ui-variant][ui-variant=radio_buttons] .options .opt:has(> input[type=radio]:checked){
    color:var(--color-primary);
    border-color:currentColor;
  }
  ui-variants [ui-variant][ui-variant=radio_buttons] .options .opt:has(> input[type=radio]:disabled){
    opacity:0.5;
    pointer-events:none;
  }