/**
* selector ì¤íì¼
*/
/* 기본 ìí */
{#vid} .select .select-selector__input {
border: {border.default};
background-color: {color.background};
font-family: {font.name};
color: {font.color};
font-size: {font.size}px;
{font.styles}
}
{#vid} .select-selector__button {
border: {border.default};
background-color: {color.background};
}
{#vid} .select-selector__title {
font-family: {font.name};
color: {font.color};
font-size: {font.size}px;
{font.styles}
}
/* hover ìí */
{#vid} .select-selector__input:hover {
border: {border.hover};
}
{#vid} .select-selector__button:hover {
border: {border.hover};
}
/* select-selector ë¶íìí ì¤íì¼ ì ê±° */
{#vid} .select-selector__button:active,
{#vid} .select--open .select-selector__button,
{#vid} .select--open .select-selector__input {
box-shadow: none;
}
/**
* container ì¤íì¼
*/
/* 기본 ìí */
{#cid} .notification-message__text {
font-family: {font.name};
color: {font.color};
font-size: {font.size}px;
{font.styles}
}
{#cid} .select-container__text {
font-family: {font.name};
color: {font.color};
font-size: {font.size}px;
{font.styles}
}
{#cid} .select-container__item {
background-color: {color.background};
height: {itemHeight}px !important;
}
{#cid} .select-selector__icon {
fill: {color.icon};
}
{#cid} .select-container__button {
height: auto;
}
/* ì í ìí */
{#cid} .select-container__item--selected .select-container__text {
color: {font.selectedColor};
}
{#cid} .select-container__item.select-container__item--selected {
background-color: {color.selected};
}
/* hover ìí */
{#cid} .select-container__button:active .select-container__text {
color: {font.activeColor};
}
{#cid} .select-container__button:active {
background-color: {color.active};
}
{#vid} .checkbox {
font-family: {font.name};
}
{#vid} .checkbox__label {
color: {font.color};
font-size: {font.size}px;
{font.styles}
}
{#vid} .checkbox__label::before {
border-color: {color.iconBg};
background-color: transparent;
}
{#vid} .checkbox__label::after {
border-left-color: {color.iconMark};
border-bottom-color: {color.iconMark};
}
/* ì¤ë¦½(indeterminate) ìí */
{#vid} .checkbox.checkbox--indeterminate .checkbox__input + .checkbox__label:before {
border-color: {color.iconBg};
}
{#vid} .checkbox.checkbox--indeterminate .checkbox__input + .checkbox__label:after {
border-color: {color.iconBg};
}
/* ì í(checked) ìí */
{#vid} .checkbox__input:checked + .checkbox__label:before {
background-color: {color.iconBg};
border-color: {color.iconBg};
}
{#vid} .checkbox__input:checked + .checkbox__label {
color: {font.selectedColor};
}
{#vid} .checkbox:has(.checkbox__input:checked) {
background-color: {color.selected};
}
/* hover ìí */
{#vid} .checkbox__label:hover:before {
border-color: {color.iconHover};
}
{#vid} .radio {
font-family: {font.name};
}
{#vid} .radio__label {
color: {font.color};
font-size: {font.size}px;
{font.styles}
}
{#vid} .radio__label:before {
border-color: {color.iconBg};
}
/* ì í(checked) ìí */
{#vid} .radio__input:checked + .radio__label:after,
{#vid} .radio__input:checked + .radio__label:hover:after {
background-color: {color.iconMark};
}
{#vid} .radio__input:checked + .radio__label:before {
background-color: {color.iconBg};
border-color: {color.iconBg};
}
{#vid} .radio__input:checked + .radio__label {
color: {font.selectedColor};
}
{#vid} .radio:has(.radio__input:checked) {
background-color: {color.selected};
}
/* hover ìí */
{#vid} .radio__label:hover:before {
border-color: {color.iconHover};
}