yc-select{
  --select-border-radius:var(--button-border-radius);
  --select-bg-color:var(--section-bg-color, var(--color-base-white));
  --select-text-color:rgb(var(--section-text-color, var(--color-base-black)));
  width:200px;
  display:flex;
  position:relative;
}
yc-select::before{
  content:"";
  z-index:2;
  width:100%;
  height:100%;
  position:absolute;
}
yc-select button.icon{
  width:100%;
  padding:8px 12px;
  font-size:var(--text-sm);
  justify-content:space-between;
}
@media (min-width: 768px){
  yc-select button.icon::after{
    content:"";
    width:6px;
    height:6px;
    rotate:45deg;
    position:relative;
    border-radius:1px;
    inset-block-start:-2px;
    border-block-end:1.5px solid currentColor;
    border-inline-end:1.5px solid currentColor;
    transition:var(--transition-duration-normal);
  }
  [dir="rtl"] yc-select button.icon::after{
    rotate:-45deg;
  }
  yc-select button.icon:has(:not(input:checked)) + yc-select-content{
    opacity:0;
    filter:blur(2px);
    visibility:hidden;
    translate:0 -0.5em;
  }
}
yc-select yc-select-content{
  display:grid;
  z-index:2;
  width:100%;
  position:absolute;
  inset-block-start:calc(100% + 0.5em);
  border-radius:var(--modal-border-radius);
  background-color:var(--select-bg-color);
  transition:var(--transition-duration-normal);
  border:1px solid color-mix(in srgb, currentColor 20%, transparent);
}
yc-select yc-select-content yc-select-header{
  display:none;
  padding-block:1em 1.5em;
  border-block-end:1px solid color-mix(in srgb, currentColor 8%, transparent);
}
yc-select yc-select-content yc-select-header span{
  display:flex;
  gap:var(--gap-sm);
  align-items:center;
  justify-content:center;
  font-size:var(--text-md);
}
yc-select yc-select-content a{
  padding:8px 12px;
  position:relative;
  margin-inline:4px;
  font-size:var(--text-sm);
  border-radius:var(--select-border-radius);
  color:var(--select-text-color);
  transition:var(--transition-duration-normal);
}
yc-select yc-select-content a span{
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:1;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
}
yc-select yc-select-content a::after{
  width:10px;
  height:5px;
  rotate:315deg;
  position:absolute;
  translate:-50% -50%;
  inset-inline-end:4px;
  inset-block-start:50%;
  border:solid currentColor;
  border-width:0 0 1.5px 1.5px;
}
[dir="rtl"] yc-select yc-select-content a::after{
  inset-inline-end:16px;
}
yc-select yc-select-content a:nth-child(2){
  margin-block-start:4px;
}
yc-select yc-select-content a:last-child{
  margin-block-end:4px;
}
yc-select yc-select-content a[data-checked]{
  background-color:color-mix(in srgb, currentColor 3%, transparent);
}
yc-select yc-select-content a[data-checked]::after{
  content:"";
}
yc-select yc-select-content a:hover{
  background-color:color-mix(in srgb, currentColor 5%, transparent);
}
@media (min-width: 768px){
  yc-select:not(:has(button.icon:focus-within))::before{
    content:none;
  }
  yc-select:not(:has(button.icon:focus-within)) yc-select-content{
    opacity:0;
    filter:blur(2px);
    visibility:hidden;
    translate:0 -0.5em;
  }
}

.select-trigger label[data-trigger]{
  display:none;
  cursor:pointer;
  width:-moz-fit-content;
  width:fit-content;
}

@media (max-width: 768px){
  .select-trigger label[data-trigger]{
    display:flex;
  }
  yc-select{
    width:100%;
  }
  yc-select button.icon{
    display:none;
  }
  yc-select yc-select-content{
    border:none;
    position:relative;
  }
  yc-select yc-select-content yc-select-header{
    display:block;
  }
  yc-select yc-select-content a{
    padding:12px;
  }
}