@layer snippets{
  ui-variants{
    display:grid;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
  }
  ui-variants [ui-variant]{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  ui-variants [ui-variant] .label{
    font:var(--font-body-md);
  }
  ui-variants [ui-variant] .options{
    display:flex;
    flex-wrap:wrap;
    gap:var(--spacing-8);
  }
  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 .opt{
    display:flex;
    align-items:center;
    min-width:36px;
    height:48px;
    padding-inline:var(--spacing-24);
    transition:var(--transition-standard-default-effects);
    border:2px solid var(--bg-on-shade-color);
    border-radius:var(--radius-button);
    background-color:var(--bg-shade-color);
    cursor:pointer;
  }
  ui-variants [ui-variant][ui-variant=textual_buttons] .options .opt:has(> input[type=radio]:checked){
    border-width:2px;
    border-color:var(--fg-color);
  }
  ui-variants [ui-variant][ui-variant=textual_buttons] .options .opt:has(> input[type=radio]:disabled){
    opacity:0.5;
    pointer-events:none;
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    transition:var(--transition-standard-default-effects);
    border-radius:var(--radius-rounded);
    background-color:color-mix(in srgb, var(--color-value), black 5%);
    cursor:pointer;
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt > i{
    color:transparent;
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt:has(> input[type=radio]:checked){
    box-shadow:0 0 0 2px var(--bg-color), 0 0 0 5px var(--fg-color);
  }
  ui-variants [ui-variant][ui-variant=color_base_buttons] .options .opt:has(> input[type=radio]:disabled){
    background-color:color-mix(in srgb, var(--color-value) 50%, transparent);
    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=image_based_buttons] .options .opt{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt .image{
    display:flex;
    position:relative;
    align-items:center;
    justify-content:center;
    width:80px;
    height:80px;
    overflow:hidden;
    transition:var(--transition-standard-default-effects);
    border-radius:var(--radius-rounded);
    outline:1px solid var(--bg-on-shade-color);
    background-color:color-mix(in srgb, var(--color-value), black 5%);
    cursor:pointer;
  }
  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 .image ui-image-fallback{
    background-color:var(--bg-shade-color);
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt:has(> input[type=radio]:checked) .image{
    box-shadow:0 0 0 2px var(--bg-color), 0 0 0 4px var(--fg-color);
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt .value{
    text-align:center;
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt:has(> input[type=radio]:disabled){
    pointer-events:none;
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt:has(> input[type=radio]:disabled) .image > img{
    filter:grayscale(1) blur(1px);
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt:has(> input[type=radio]:disabled) .image::before{
    content:"";
    position:absolute;
    z-index:2;
    width:1px;
    height:140%;
    background-color:white;
    rotate:45deg;
  }
  ui-variants [ui-variant][ui-variant=image_based_buttons] .options .opt:has(> input[type=radio]:disabled) .value{
    opacity:0.5;
  }
  ui-variants [ui-variant][ui-variant=radio_buttons] .options{
    display:flex;
    gap:var(--spacing-16);
    flex-wrap:wrap;
  }
  ui-variants [ui-variant][ui-variant=radio_buttons] .options .opt{
    display:flex;
    align-items:center;
    cursor:pointer;
    gap:var(--spacing-8);
  }
  ui-variants [ui-variant][ui-variant=radio_buttons] .options .opt:has(> input[type=radio]:disabled){
    opacity:0.5;
    pointer-events:none;
  }
}