yc-variant{
  --variant-border-radius:var(--button-border-radius);
  --variant-bg-color:var(--section-bg-color, var(--color-base-white));
  --variant-text-color:rgb(var(--section-text-color, var(--color-base-black)));
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--gap-md);
  width:inherit;
}
yc-variant .variant-item{
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  font-size:var(--text-sm);
  color:var(--variant-text-color);
}
yc-variant .variant-item:not(.radio-item) input[type=radio]{
  width:0;
  height:0;
  opacity:0;
  position:absolute;
}
yc-variant[name=toggle] .toggle-item{
  position:relative;
  padding:8px 12px;
  max-height:37px;
  min-width:37px;
  color:var(--variant-text-color);
}
yc-variant[name=toggle] .toggle-item:has(input:checked){
  color:var(--variant-bg-color);
  border-color:var(--variant-text-color);
  background-color:var(--variant-text-color);
}
yc-variant[name=toggle] .toggle-item:has(input:disabled){
  opacity:0.5;
  overflow:hidden;
  cursor:not-allowed;
}
yc-variant[name=toggle] .toggle-item:has(input:disabled)::before{
  content:"";
  z-index:1;
  width:100%;
  height:1px;
  rotate:-45deg;
  position:absolute;
  background-color:color-mix(in srgb, var(--variant-text-color) 40%, transparent);
}
yc-variant[name=toggle] .toggle-item:has(input:disabled):has(input:checked)::before{
  background-color:color-mix(in srgb, var(--variant-bg-color) 40%, transparent);
}
yc-variant[name=color]{
  gap:var(--gap-lg);
}
yc-variant[name=color] .color-item{
  padding:0;
  width:28px;
  height:28px;
  position:relative;
  color:var(--variant-color);
  background-color:currentColor;
  border-radius:var(--radius-circle);
  border:1.5px solid var(--variant-bg-color);
  outline-offset:1.5px;
  outline:1.5px solid color-mix(in srgb, var(--variant-text-color) 20%, transparent);
}
yc-variant[name=color] .color-item::after{
  width:150%;
  height:150%;
  position:absolute;
  border:1.5px solid var(--variant-text-color);
}
yc-variant[name=color] .color-item:has(input:checked){
  outline-color:var(--variant-text-color);
}
yc-variant[name=color] .color-item:has(input:focus-visible)::after{
  content:"";
}
yc-variant[name=color] .color-item:has(input:disabled){
  opacity:0.6;
  cursor:not-allowed;
}
yc-variant[name=color] .color-item:has(input:disabled)::before{
  content:"";
  z-index:1;
  width:100%;
  height:1px;
  rotate:135deg;
  position:absolute;
  background-color:color-mix(in srgb, var(--variant-text-color) 80%, transparent);
}
yc-variant[name=color] .color-item:hover{
  background-color:color-mix(in srgb, currentColor 80%, transparent);
}
yc-variant[name=radio]{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap-lg);
}
yc-variant[name=radio] .radio-item{
  display:inline-flex;
  align-items:center;
  gap:var(--gap-md);
  font-size:var(--text-md);
}
yc-variant[name=radio] .radio-item input[type=radio]{
  width:18px;
  height:18px;
  cursor:pointer;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  position:relative;
  color:var(--variant-text-color);
  border-radius:var(--radius-circle);
  border:1.2px solid color-mix(in srgb, currentColor 20%, transparent);
}
yc-variant[name=radio] .radio-item input[type=radio]:checked{
  border-color:currentColor;
  background-color:currentColor;
}
yc-variant[name=radio] .radio-item input[type=radio]:checked::after{
  content:"";
  width:50%;
  height:50%;
  position:absolute;
  inset:50% 0 0 50%;
  translate:-50% -50%;
  clip-path:circle();
  background-color:var(--variant-bg-color);
}
yc-variant[name=radio] .radio-item:has(input:disabled){
  opacity:0.5;
}
yc-variant[name=radio] .radio-item:has(input:disabled):hover{
  cursor:not-allowed;
}
yc-variant[name=image] .image-item{
  padding:2px;
  position:relative;
  color:var(--variant-text-color);
}
yc-variant[name=image] .image-item img{
  height:70px;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:calc(var(--variant-border-radius) * 0.66);
  transition:var(--transition-duration-normal);
}
yc-variant[name=image] .image-item:has(input:checked){
  border-color:currentColor;
}
yc-variant[name=image] .image-item:has(input:disabled){
  opacity:0.8;
  pointer-events:none;
}
yc-variant[name=image] .image-item:has(input:disabled) img{
  filter:grayscale(1) opacity(0.6) blur(0.5px);
}
yc-variant[name=image] .image-item:has(input:disabled)::before{
  content:"";
  z-index:1;
  width:125%;
  height:1px;
  rotate:135deg;
  position:absolute;
  background-color:color-mix(in srgb, currentColor 40%, transparent);
}
yc-variant[name=image] .image-item:hover img{
  opacity:0.8;
}
yc-variant[name=upload-image] yc-upload{
  width:100%;
  display:grid;
  grid-gap:var(--gap-md);
  gap:var(--gap-md);
}
yc-variant[name=upload-image] yc-upload .upload-preview{
  display:flex;
  gap:var(--gap-md);
  flex-direction:column;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:3em 1em;
  cursor:pointer;
  border-radius:var(--variant-border-radius);
  background-color:color-mix(in srgb, currentColor 2%, transparent);
  border:2px dotted color-mix(in srgb, currentColor 10%, transparent);
  transition:var(--transition-duration-normal);
}
yc-variant[name=upload-image] yc-upload .upload-preview svg{
  color:color-mix(in srgb, currentColor 60%, transparent);
}
yc-variant[name=upload-image] yc-upload .upload-preview input[type=file]{
  width:0;
  height:0;
  opacity:0;
  position:absolute;
}
yc-variant[name=upload-image] yc-upload .upload-preview img{
  position:absolute;
  -o-object-fit:contain;
     object-fit:contain;
  translate:-50% -50%;
  inset:50% 0 0 50%;
}
yc-variant[name=upload-image] yc-upload .upload-preview:hover{
  border-color:color-mix(in srgb, currentColor 20%, transparent);
  background-color:color-mix(in srgb, currentColor 5%, transparent);
}
yc-variant[name=upload-image] yc-upload .upload-info{
  display:flex;
  gap:var(--gap-md);
  align-items:center;
  justify-content:space-between;
  padding:0.7em;
  border-radius:var(--variant-border-radius);
  border:1px solid color-mix(in srgb, currentColor 10%, transparent);
  transition:var(--transition-duration-normal);
}
yc-variant[name=upload-image] yc-upload .upload-info:not(:has(img)){
  opacity:0;
  z-index:-1;
  visibility:hidden;
  margin-block-start:-7em;
}
yc-variant[name=upload-image] yc-upload .upload-info:has(img){
  margin-block-start:0em;
}
yc-variant[name=upload-image] yc-upload .upload-info .preview{
  display:flex;
  align-items:center;
  gap:var(--gap-lg);
}
yc-variant[name=upload-image] yc-upload .upload-info .preview img{
  width:50px;
  height:50px;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:calc(var(--variant-border-radius) * 0.66);
}
yc-variant[name=upload-image] yc-upload .upload-info .preview .metadata{
  display:grid;
  grid-gap:var(--gap-sm);
  gap:var(--gap-sm);
}
yc-variant[name=upload-image] yc-upload .upload-info .preview .metadata .name{
  font-size:var(--text-md);
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
yc-variant[name=upload-image] yc-upload .upload-info .preview .metadata .size{
  opacity:0.6;
  font-size:var(--text-sm);
}
yc-variant[name=upload-image] yc-upload .upload-info .actions button{
  color:var(--variant-text-color);
}
yc-variant[name=dropdown]{
  width:50%;
}
@media (max-width: 768px){
  yc-variant[name=dropdown]{
    width:100%;
  }
}