:root {
    --d-font-family: "Roboto", sans-serif;
    --d-border-color: #333333b3;
    --d-border-radius: 4px;
    --d-input-padding-y: 1rem;
    --d-line-height: 19px;
    --d-font-size: 14px;
    --d-letter-spacing: 0.5px;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* #region NOT-DEFINED */

:is(.textbox, .selectbox, d-combo):not(:defined)::before,
:is(.textbox, .selectbox, d-combo):not(:defined)::after {
    content: ' ';
    display: block;
    width: 100%;
    opacity: 0.7;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    pointer-events: none !important;
}

:is(.textbox, .selectbox, d-combo):not(:defined)::before {
    width: 50%;
    height: 19px;
    margin-bottom: 4px;
}

:is(.textbox, .selectbox, d-combo):not(:defined)::after {
    height: 53px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

*:not(:defined) * {
    display: none !important;
    pointer-events: none !important;
}

d-counter:not(:defined) {
    height: 24px;
}

/* #endregion NOT-DEFINED */


d-image span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #1287f9;
    color: white;
    font-size: 32px;
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    letter-spacing: 1.2px;
}

:is(.textbox, .selectbox, d-combo) {
    display: flex;
    flex-direction: column;
}

.textbox {
    --tbx-bg-color: #ffffff;
    --tbx-bg-color-hover: #ffffff;
    --tbx-bg-color-disabled: #f2f2f2;
    --tbx-opacity-disabled: 1;
    /**/
    --tbx-label-font-family: var(--d-font-family);
    --tbx-label-font-size: 14px;
    --tbx-label-font-weight: 600;
    --tbx-label-letter-spacing: var(--d-letter-spacing);
    --tbx-label-color: #333;
    --tbx-label-color-hover: #333;
    --tbx-label-color-focus: #333;
    --tbx-label-color-invalid: #333;
    --tbx-label-color-disabled: #6c757d;
    --tbx-label-bg-color: unset;
    --tbx-label-margin: 0 0 4px 0;
    --tbx-label-padding: 0;
    /**/
    --tbx-font-family: var(--d-font-family);
    --tbx-font-size: var(--d-font-size);
    --tbx-text-color: #111827;
    --tbx-text-color-disabled: #6c757d;
    --tbx-letter-spacing: var(--d-letter-spacing);
    --tbx-text-align: unset;
    --tbx-line-height: var(--d-line-height);
    --tbx-height: auto;
    --tbx-padding: var(--d-input-padding-y) .75rem;
    /**/
    --tbx-placeholder-color: #6b7280;
    --tbx-placeholder-color-focus: #6b7280;
    --tbx-placeholder-letter-spacing: var(--d-letter-spacing);
    /**/
    --tbx-error-color: #ef4444;
    /**/
    --tbx-border-color: var(--d-border-color);
    --tbx-border-color-hover: #9ca3af;
    --tbx-border-color-focus: #3b82f6;
    --tbx-border-color-invalid: #ef4444;
    --tbx-border-color-disabled: #cbd5e1;
    --tbx-border-width: 1px;
    --tbx-border-radius: var(--d-border-radius);
    --tbx-outline-width: 1px;
    --tbx-outline-offset: 0px;
    --tbx-outline-color: #3c8dbc;
    --tbx-outline-color-invalid: #ef4444;
    --tbx-clear-size: 17px;
    --tbx-clear-right-distance: 14px;
    --tbx-clear-padding: 4px;
    --tbx-clear-color: #6b7280;
    --tbx-clear-color-hover: #111827;
    --tbx-clear-color-active: #111827;
    --tbx-clear-bg-color: transparent;
    --tbx-clear-bg-color-hover: rgba(17, 24, 39, 0.06);
    --tbx-clear-bg-color-active: rgba(17, 24, 39, 0.1);
    --tbx-clear-border-radius: 0px;
    --tbx-clear-outline-color: #3c8dbc;
    --tbx-clear-outline-width: 1px;
    --tbx-clear-outline-style: solid;
    /**/
    font-family: var(--tbx-font-family);
}

    /* #region TEXTBOX STYLES */
    .textbox:has(input:disabled) {
        opacity: var(--tbx-opacity-disabled);
    }

    .textbox > label {
        position: relative;
        font-size: var(--tbx-label-font-size);
        font-weight: var(--tbx-label-font-weight);
        font-family: var(--tbx-label-font-family);
        letter-spacing: var(--tbx-label-letter-spacing);
        color: var(--tbx-label-color);
        background-color: var(--tbx-label-bg-color);
        margin: var(--tbx-label-margin);
        padding: var(--tbx-label-padding);
        line-height: var(--tbx-line-height);
    }

    .textbox:focus-within > label {
        color: var(--tbx-label-color-focus);
    }

    .textbox:has(input[aria-invalid='true']) > label {
        color: var(--tbx-label-color-invalid);
    }

    .textbox > [data-role='container'] {
        position: relative;
    }

        .textbox > [data-role='container'] > input {
            width: 100%;
            box-sizing: border-box;
            height: var(--tbx-height);
            padding: var(--tbx-padding);
            background: var(--tbx-bg-color);
            border: var(--tbx-border-width) solid var(--tbx-border-color);
            border-radius: var(--tbx-border-radius);
            font-size: var(--tbx-font-size);
            font-family: var(--tbx-font-family);
            color: var(--tbx-text-color);
            line-height: var(--tbx-line-height);
            letter-spacing: var(--tbx-letter-spacing);
            text-align: var(--tbx-text-align);
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
        }

            .textbox > [data-role='container'] > input::placeholder {
                color: var(--tbx-placeholder-color);
                letter-spacing: var(--tbx-placeholder-letter-spacing);
                opacity: 1;
            }

            .textbox > [data-role='container'] > input:focus::placeholder {
                color: var(--tbx-placeholder-color-focus);
            }

            .textbox > [data-role='container'] > input:hover {
                border-color: var(--tbx-border-color-hover);
                background: var(--tbx-bg-color-hover);
            }

            .textbox > [data-role='container'] > input:focus-visible {
                border-color: var(--tbx-border-color-focus);
                box-shadow: none;
                outline: var(--tbx-outline-width) solid var(--tbx-outline-color);
                outline-offset: var(--tbx-outline-offset);
            }

        .textbox > [data-role='container'] > [data-role='underlay'] {
            position: absolute;
            inset: 0;
            pointer-events: none;
            box-sizing: content-box;
            padding: var(--tbx-padding);
            line-height: var(--tbx-line-height);
            text-align: var(--tbx-text-align);
            border: solid var(--tbx-border-width) transparent;
        }

            .textbox > [data-role='container'] > [data-role='underlay'] > pre {
                font-size: var(--tbx-font-size);
                font-family: var(--tbx-font-family);
                letter-spacing: var(--tbx-letter-spacing);
                color: var(--tbx-placeholder-color);
                line-height: var(--tbx-line-height);
                display: inline-block;
                margin: 0;
            }

                .textbox > [data-role='container'] > [data-role='underlay'] > pre:nth-last-child(2) {
                    color: transparent;
                }

        .textbox > [data-role='container'] > [data-clear] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: all 0.2s;
            width: var(--tbx-clear-size);
            height: var(--tbx-clear-size);
            right: var(--tbx-clear-right-distance);
            color: var(--tbx-clear-color);
            padding: var(--tbx-clear-padding);
            outline-width: var(--tbx-clear-outline-width);
            outline-color: var(--tbx-clear-outline-color);
            border: none;
            border-radius: var(--tbx-clear-border-radius);
            background: var(--tbx-clear-bg-color);
            cursor: pointer;
            line-height: 0px;
        }

            .textbox > [data-role='container'] > [data-clear]:hover {
                background: var(--tbx-clear-bg-color-hover);
                color: var(--tbx-clear-color-hover);
            }

            .textbox > [data-role='container'] > [data-clear]:focus-visible {
                outline-style: var(--tbx-clear-outline-style);
            }

            .textbox > [data-role='container'] > [data-clear]:active {
                background: var(--tbx-clear-bg-color-active);
                transform: translateY(-50%) scale(0.85);
                color: var(--tbx-clear-color-active);
            }

            .textbox > [data-role='container'] > [data-clear]:disabled {
                opacity: 0.35;
                pointer-events: none;
            }

            .textbox > [data-role='container'] > [data-clear] > svg {
                color: inherit;
                fill: currentColor;
            }

    .textbox[disabled] > label {
        color: var(--tbx-text-color-disabled);
    }

    .textbox > [data-role='container'] > input:disabled {
        color: var(--tbx-text-color-disabled);
        background: var(--tbx-bg-color-disabled);
        border-color: var(--tbx-border-color-disabled);
        /* cursor: not-allowed; */
        /* opacity: 0.7; */
    }

    .textbox > [data-role='container'] > input:read-only {
        background: var(--tbx-bg-color-disabled);
        letter-spacing: var(--d-letter-spacing);
        font-family: var(--d-font-family);
    }

    .textbox > [data-role='container'] > input[aria-invalid='true'] {
        border-color: var(--tbx-border-color-invalid);
        outline-color: var(--tbx-outline-color-invalid);
    }

    .textbox > [data-role='error-message'] {
        color: var(--tbx-error-color);
        margin-top: 4px;
        font-size: 13px;
        line-height: 16px;
    }

:is(d-phone, d-otp).textbox {
    --tbx-letter-spacing: 1.5px;
    --tbx-placeholder-letter-spacing: 1.5px;
    --tbx-placeholder-color-focus: transparent;
    --tbx-font-family: 'Source Sans Pro', sans-serif;
}

    :is(d-phone, d-otp).textbox > [data-role='container'] > input:not([data-has-value]):not(:focus) ~ [data-role='underlay'] > pre {
        display: none;
    }

d-otp.textbox {
    --tbx-letter-spacing: 4px;
    --tbx-placeholder-letter-spacing: 4px;
    --tbx-font-size: 16px;
    --char-w: calc(var(--tbx-font-size) * 0.55 + var(--tbx-letter-spacing));
    --otp-pad-left: max(calc(50% - 3 * var(--char-w)), .75rem);
    --tbx-padding: 1rem .75rem 1rem var(--otp-pad-left);
}

/* #endregion TEXTBOX STYLES */

.selectbox {
    --sbx-bg-color: #ffffff;
    --sbx-bg-color-hover: #ffffff;
    --sbx-bg-color-disabled: #eef2f7;
    --sbx-font-family: var(--d-font-family);
    --sbx-font-size: var(--d-font-size);
    --sbx-text-color: #111827;
    --sbx-text-color-disabled: #6c757d;
    --sbx-text-color-invalid: #ef4444;
    --sbx-line-height: var(--d-line-height);
    --sbx-placeholder-color: #6b7280;
    --sbx-placeholder-color-focus: #111827;
    --sbx-border-color: var(--d-border-color);
    --sbx-border-color-hover: #9ca3af;
    --sbx-border-color-focus: #9ca3af; /* #3b82f6 */
    --sbx-border-color-invalid: #ef4444;
    --sbx-border-color-disabled: #cbd5e1;
    --sbx-border-radius: var(--d-border-radius);
    --sbx-outline-width: 1px;
    --sbx-outline-color: #3c8dbc;
    --sbx-outline-color-invalid: #ef4444;
    --sbx-height: auto;
    --sbx-padding-x: 12px;
    --sbx-padding-y: var(--d-input-padding-y);
    --sbx-focus-ring: none; /* 0 0 0 3px rgba(59, 130, 246, 0.28); */
    --sbx-focus-ring-invalid: none; /* 0 0 0 3px rgba(59, 130,246, 0.28); */

    --sbx-label-margin: 0 0 4px 0;
    --sbx-option-bg-disabled: #f1f2f3;
    --sbx-option-text-disabled: #6c757d;
    /* Chevron */
    --sbx-chevron-size: 16px;
    --sbx-chevron-right-distance: 12px;
    /* Clear button */
    --sbx-clear-size: 17px;
    --sbx-clear-right-distance: 32px;
    --sbx-clear-padding: 4px;
    --sbx-clear-color: #6b7280;
    --sbx-clear-color-hover: #111827;
    --sbx-clear-color-active: #111827;
    --sbx-clear-bg-hover: rgba(17, 24, 39, 0.06);
    --sbx-clear-bg-active: rgba(17, 24, 39, 0.1);
    --sbx-clear-border-radius: 0px;
    --sbx-clear-outline-color: #3c8dbc;
    --sbx-clear-outline-width: 1px;
    --sbx-clear-outline-style: solid;
    /**/
    font-family: var(--sbx-font-family);
    line-height: var(--sbx-line-height);
}

    /* #region SELECTBOX STYLES */

    .selectbox > label {
        margin: var(--sbx-label-margin);
        font-size: var(--sbx-font-size);
        line-height: inherit;
        font-weight: 500;
        color: var(--sbx-text-color);
    }

    .selectbox > div {
        position: relative;
    }

        .selectbox > div > select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 100%;
            box-sizing: border-box;
            height: var(--sbx-height);
            padding: var(--sbx-padding-y) 0;
            padding-left: var(--sbx-padding-x);
            padding-right: calc(var(--sbx-clear-right-distance) + var(--sbx-clear-size));
            background: var(--sbx-bg-color);
            border: 1px solid var(--sbx-border-color);
            border-radius: var(--sbx-border-radius);
            color: var(--sbx-text-color);
            font-size: var(--sbx-font-size);
            line-height: inherit;
            text-overflow: ellipsis;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
        }

            .selectbox > div > select:hover {
                background-color: var(--sbx-bg-color-hover);
                border-color: var(--sbx-border-color-hover);
            }

            .selectbox > div > select:focus-visible {
                border-color: var(--sbx-border-color-focus);
                box-shadow: var(--sbx-focus-ring);
                outline: var(--sbx-outline-width) solid var(--sbx-outline-color);
            }

            .selectbox > div > select:not([data-has-value]) {
                color: var(--sbx-placeholder-color);
            }

                .selectbox > div > select:not([data-has-value]):focus {
                    color: var(--sbx-placeholder-color-focus);
                }

    .selectbox:has(> div > select:disabled) > label {
        color: var(--sbx-text-color-disabled);
    }

    .selectbox > div > select:disabled {
        border-color: var(--sbx-border-color-disabled);
        background: var(--sbx-bg-color-disabled);
        color: var(--sbx-text-color-disabled);
        box-shadow: none;
        cursor: not-allowed;
    }

    .selectbox > div > select[aria-invalid='true'] {
        border-color: var(--sbx-border-color-invalid);
        outline-color: var(--sbx-outline-color-invalid);
        box-shadow: var(--sbx-focus-ring-invalid);
    }

    .selectbox:has(select[aria-invalid='true']) [data-role='error-message'] {
        display: inline-block;
        color: var(--sbx-text-color-invalid);
        margin-top: 4px;
        font-size: 13px;
        line-height: 16px;
    }

    .selectbox > div > select option:disabled {
        background: var(--sbx-option-bg-disabled);
        color: var(--sbx-option-text-disabled);
    }

    /* #region CLEAR & CHEVRON */

    .selectbox > div > select ~ :is([data-clear], [data-chevron]) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.2s;
    }

    /* Clear button */
    .selectbox > div > select ~ [data-clear] {
        width: var(--sbx-clear-size);
        height: var(--sbx-clear-size);
        right: var(--sbx-clear-right-distance);
        color: var(--sbx-clear-color);
        padding: var(--sbx-clear-padding);
        outline-width: var(--sbx-clear-outline-width);
        outline-color: var(--sbx-clear-outline-color);
        border: none;
        border-radius: var(--sbx-clear-border-radius);
        background: none;
        cursor: pointer;
        line-height: 0px;
    }

        .selectbox > div > select ~ [data-clear]:hover {
            background: var(--sbx-clear-bg-hover);
            color: var(--sbx-clear-color-hover);
        }

        .selectbox > div > select ~ [data-clear]:focus-visible {
            outline-style: var(--sbx-clear-outline-style);
        }

        .selectbox > div > select ~ [data-clear]:active {
            background: var(--sbx-clear-bg-active);
            transform: translateY(-50%) scale(0.85);
            color: var(--sbx-clear-color-active);
        }

        .selectbox > div > select ~ [data-clear]:disabled {
            opacity: 0.35;
            pointer-events: none;
        }

        .selectbox > div > select ~ [data-clear] > svg {
            color: inherit;
            fill: currentColor;
        }

    /* Chevron */
    .selectbox > div > select ~ [data-chevron] {
        right: var(--sbx-chevron-right-distance);
        width: var(--sbx-chevron-size);
        height: var(--sbx-chevron-size);
        color: var(--sbx-text-color);
        pointer-events: none;
        opacity: 0.85;
    }

    .selectbox > div > select[data-open] ~ [data-chevron] {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Disabled */
    .selectbox > div:has(> select:disabled) :is([data-chevron], [data-clear]) {
        opacity: 0.55;
    }

    .selectbox > div:has(> select:disabled) [data-clear] {
        pointer-events: none;
    }

/* #endregion CLEAR & CHEVRON */

/* #endregion SELECTBOX STYLES */

/* #region MODAL */

.custom-modal-dialog {
    --modal-bg: white;
    --modal-border: none;
    --modal-border-radius: 1.5625rem;
    --modal-padding: 0px;
    --modal-backdrop-color: black;
    /**/
    display: block;
}

    .custom-modal-dialog > dialog {
        background: var(--modal-bg);
        border: var(--modal-border);
        border-radius: var(--modal-border-radius);
        padding: var(--modal-padding);
        opacity: 0;
        transform: translateY(-50px);
        transition: opacity 0.15s linear, transform 0.3s ease-out;
    }

        .custom-modal-dialog > dialog[open][data-active] {
            opacity: 1;
            transform: translateY(0);
        }

        .custom-modal-dialog > dialog::backdrop {
            opacity: 0;
            background: var(--modal-backdrop-color);
            transition: opacity 0.15s linear;
        }

        .custom-modal-dialog > dialog[data-active]::backdrop {
            opacity: 0.5;
            pointer-events: auto !important;
        }

        .custom-modal-dialog > dialog .btn-close {
            z-index: 10;
        }

    .custom-modal-dialog.modal {
        display: none;
    }

        .custom-modal-dialog.modal:has(> dialog[open]) {
            display: block;
        }

/* #endregion MODAL */


d-combo {
    --cbx-bg-color: #ffffff;
    --cbx-bg-color-hover: #ffffff;
    --cbx-bg-color-disabled: #eef2f7;
    --cbx-label-margin: 0 0 4px 0;
    --cbx-font-family: var(--d-font-family);
    --cbx-font-size: 14px;
    --cbx-line-height: var(--d-line-height);
    --cbx-text-color: #111827;
    --cbx-text-color-disabled: #6c757d;
    --cbx-text-color-invalid: #ef4444;
    --cbx-placeholder-color: #6b7280;
    --cbx-placeholder-color-focus: #111827;
    --cbx-border-color: var(--d-border-color);
    --cbx-border-color-hover: #9ca3af;
    --cbx-border-color-focus: #3b82f6; 
    --cbx-border-color-invalid: #ef4444;
    --cbx-border-color-disabled: #cbd5e1;
    --cbx-border-radius: var(--d-border-radius);
    --cbx-outline-width: 1px;
    --cbx-outline-offset: -1px;
    --cbx-outline-color: #3c8dbc;
    --cbx-outline-color-invalid: #ef4444;
    --cbx-height: auto;
    --cbx-padding-left: 12px;
    --cbx-padding-right: 12px;
    --cbx-padding-y: var(--d-input-padding-y);
    --cbx-focus-ring: none; 
    --cbx-focus-ring-invalid: none; 
    /* Listbox & Option */
    --cbx-listbox-max-height: 165px;
    --cbx-listbox-bg-color: #ffffff;
    --cbx-listbox-padding: 0px;
    --cbx-listbox-border-color: #767676;
    --cbx-listbox-border-radius: 0px;
    --cbx-option-color: #000;
    --cbx-option-color-selected: #fff;
    --cbx-option-color-disabled: #6e6e6f;
    --cbx-option-bg-color: transparent;
    --cbx-option-bg-color-hover: #596c90;
    --cbx-option-bg-color-selected: #1967d2;
    --cbx-option-bg-color-disabled: #e9e9ed;
    --cbx-option-padding: 3px 12px;
    /* Chevron */
    --cbx-chevron-size: 16px;
    --cbx-chevron-right-distance: 12px;
    /* Clear button */
    --cbx-clear-size: 17px;
    --cbx-clear-right-distance: 32px;
    --cbx-clear-padding: 4px;
    --cbx-clear-border-radius: 0px;
    --cbx-clear-color: #6b7280;
    --cbx-clear-color-hover: #111827;
    --cbx-clear-color-active: #111827;
    --cbx-clear-bg-color-hover: rgba(17, 24, 39, 0.06);
    --cbx-clear-bg-color-active: rgba(17, 24, 39, 0.1);
    --cbx-clear-outline-color: #3c8dbc;
    --cbx-clear-outline-width: 1px;
    --cbx-clear-outline-style: solid;
    /**/
    font-family: var(--cbx-font-family);
}

    /* #region COMBOBOX STYLES */

    d-combo[filter-required] {
        --cbx-clear-size: 0;
    }

    d-combo[clearable] {
        --cbx-padding-right: calc(var(--cbx-clear-right-distance) + var(--cbx-clear-size))
    }

    d-combo > label {
        display: block;
        margin: var(--cbx-label-margin);
        font-size: var(--cbx-font-size);
        line-height: var(--cbx-line-height);
        font-weight: 500;
        color: var(--cbx-text-color);
    }

    d-combo > div[role='combobox'] {
        position: relative;
        background: var(--cbx-bg-color); /* transparent; */
        font-size: var(--cbx-font-size);
        border-radius: var(--cbx-border-radius);
    }

        d-combo > div[role='combobox']:hover {
            background: var(--cbx-bg-color-hover);
        }

        d-combo > div[role='combobox']:focus {
            outline: var(--cbx-outline-width) solid var(--cbx-outline-color);
        }

        d-combo > div[role='combobox'] > input[data-role='value'] {
            position: absolute;
            border: none;
            opacity: 0;
            width: 0;
            height: 0;
            padding: 0;
            bottom: 0;
        }

        d-combo > div[role='combobox'] > div[data-role='display'] {
            position: absolute;
            display: inline-block;
            padding: var(--cbx-padding-y) 0;
            padding-left: var(--cbx-padding-left);
            padding-right: var(--cbx-padding-right);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 100%;
            width: 100%;
            color: var(--cbx-placeholder-color);
        }

        d-combo > div[role='combobox']:focus > div[data-role='display'] {
            color: var(--cbx-placeholder-color-focus);
        }

        d-combo > div[role='combobox'][data-has-value] > div[data-role='display'] {
            color: inherit;
        }

        d-combo > div[role='combobox'][data-open] > div[data-role='display'],
        d-combo > div[role='combobox']:not([data-filtered]):has( > [data-role='search']:focus) > div[data-role='display'] {
            opacity: 0.5;
        }

        d-combo > div[role='combobox'][data-filtered] > div[data-role='display'] {
            opacity: 0;
        }

        d-combo > div[role='combobox'] input[data-role='search'] {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            position: relative;
            width: 100%;
            box-sizing: border-box;
            height: var(--cbx-height);
            padding: var(--cbx-padding-y) 0;
            padding-left: var(--cbx-padding-left);
            padding-right: var(--cbx-padding-right);
            background: transparent;
            border: 1px solid var(--cbx-border-color);
            border-radius: var(--cbx-border-radius);
            font-size: inherit;
            color: var(--cbx-text-color);
            line-height: var(--cbx-line-height);
            text-overflow: ellipsis;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
        }

            d-combo > div[role='combobox'] input[data-role='search']:hover {
                border-color: var(--cbx-border-color-hover);
            }

            d-combo > div[role='combobox'] input[data-role='search']:focus-visible {
                border-color: var(--cbx-border-color-focus);
                box-shadow: var(--cbx-focus-ring);
                outline: var(--cbx-outline-width) solid var(--cbx-outline-color);
                outline-offset: var(--cbx-outline-offset);
            }

    d-combo:has(> div[role='combobox'][aria-disabled='true']) > label {
        color: var(--cbx-text-color-disabled);
    }

    d-combo > div[role='combobox'][aria-disabled='true'] {
        background: var(--cbx-bg-color-disabled);
        pointer-events: none;
        opacity: 0.7;
    }

        d-combo > div[role='combobox'][aria-disabled='true'] > input[data-role='search'] {
            border-color: var(--cbx-border-color-disabled);
            color: var(--cbx-text-color-disabled);
            box-shadow: none;
            cursor: not-allowed;
        }

    d-combo > div[role='combobox']:has(> input[data-role='value'][aria-invalid='true']):focus,
    d-combo > div[role='combobox']:has(> input[data-role='value'][aria-invalid='true']):focus-visible {
        outline-color: var(--cbx-outline-color-invalid);
    }

    d-combo > div[role='combobox'] > input[data-role='value'][aria-invalid='true'] ~ input[data-role='search'] {
        border-color: var(--cbx-border-color-invalid);
        outline-color: var(--cbx-outline-color-invalid);
        box-shadow: var(--cbx-focus-ring-invalid);
    }

    d-combo:has(> div[role='combobox'] > input[data-role='value'][aria-invalid='true']) > [data-role='error-message'] {
        color: var(--cbx-text-color-invalid);
        margin-top: 4px;
        font-size: 13px;
        line-height: 16px;
    }

    /* #region LISTBOX */

    d-combo > div[role='combobox'] > div[role='listbox'][popover] {
        margin: 0;
        position: fixed;
        inset: unset; /* Tarayıcının ortalamasını engelle */

        scroll-behavior: auto;
        overscroll-behavior: contain;
        z-index: 10;
        overflow-y: auto;
        padding: var(--cbx-listbox-padding);
        max-height: var(--cbx-listbox-max-height);
        background: var(--cbx-listbox-bg-color);
        border: 1px solid var(--cbx-listbox-border-color);
        border-radius: var(--cbx-listbox-border-radius);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
    }

        d-combo > div[role='combobox'] > div[role='listbox'][popover]::backdrop {
            background-color: transparent;
        }

    d-combo > div[role='combobox'] > div[role='listbox'] > div:not([hidden]) {
        display: flex;
        align-items: center;
        padding: var(--cbx-option-padding);
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    d-combo > div[role='combobox'] > div[role='listbox'] > div[data-active] {
        background: var(--cbx-option-bg-color-hover);
        color: var(--cbx-option-color-selected);
    }

    d-combo > div[role='combobox'] > div[role='listbox'] > div[aria-selected] {
        background: var(--cbx-option-bg-color-selected);
        color: var(--cbx-option-color-selected);
    }

    d-combo > div[role='combobox'] > div[role='listbox'] > div[aria-disabled] {
        background: var(--cbx-option-bg-color-disabled);
        color: var(--cbx-option-color-disabled);
        cursor: default;
        pointer-events: none;
        user-select: none;
    }

    /* #endregion LISTBOX */

    /* #region CLEAR & CHEVRON */

    d-combo > div[role='combobox'] > :is([data-clear], [data-chevron]) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.2s;
    }

    d-combo > div[role='combobox'] > [data-clear] {
        right: var(--cbx-clear-right-distance);
        width: var(--cbx-clear-size);
        height: var(--cbx-clear-size);
        color: var(--cbx-clear-color);
        padding: var(--cbx-clear-padding);
        outline-width: var(--cbx-clear-outline-width);
        outline-color: var(--cbx-clear-outline-color);
        border: none;
        border-radius: var(--cbx-clear-border-radius);
        background: none;
        cursor: pointer;
        line-height: 0px;
    }

        d-combo > div[role='combobox'] > [data-clear]:hover {
            background: var(--cbx-clear-bg-color-hover);
            color: var(--cbx-clear-color-hover);
        }

        d-combo > div[role='combobox'] > [data-clear]:focus-visible {
            outline-style: var(--cbx-clear-outline-style);
        }

        d-combo > div[role='combobox'] > [data-clear]:active {
            background: var(--cbx-clear-bg-color-active);
            transform: translateY(-50%) scale(0.85);
            color: var(--cbx-clear-color-active);
        }

        d-combo > div[role='combobox'] > [data-clear]:disabled {
            opacity: 0.35;
            pointer-events: none;
        }

        d-combo > div[role='combobox'] > [data-clear] > svg {
            color: inherit;
            fill: currentColor;
        }

    d-combo > div[role='combobox'] > [data-chevron] {
        right: var(--cbx-chevron-right-distance);
        width: var(--cbx-chevron-size);
        height: var(--cbx-chevron-size);
        color: var(--cbx-text-color);
        pointer-events: none;
        opacity: 0.85;
    }

    d-combo > div[role='combobox'][data-open] > [data-chevron] {
        transform: translateY(-50%) rotate(180deg);
    }

/* #endregion CLEAR & CHEVRON */

/* #endregion COMBOBOX STYLES */