.select-control {
    display: grid;
    font-family: var(--control-font-family, var(--defaultFontFamily, 'Roboto', "Helvetica Neue", sans-serif));
}

.select-control .title {
    font-size: var(--control-label-size, 14px);
    font-weight: var(--control-label-weight, 500);
    color: var(--control-label-color, #4a5568);
    margin: 0 0 6px 0;
    line-height: var(--control-line-height, 1.4);
}

.select-control .select {
    height: var(--control-height, 40px);
    min-height: var(--control-height, 40px);
    font-size: var(--control-font-size, 14px);
    font-weight: var(--control-input-weight, 500);
    line-height: var(--control-line-height, 1.4);
    color: var(--control-text-color, #2d3748);
    border: var(--control-border-width, 1.5px) solid var(--control-border-color, #e2e8f0);
    border-radius: var(--control-border-radius, 6px);
    outline: none;
    padding: 10px 14px;
    transition: 0.2s ease;
    background-color: var(--control-bg, #ffffff);
}

.select-control .select:hover:not(:disabled) {
    border-color: var(--control-border-hover, #cbd5e0);
    background: var(--control-bg-hover, #f7fafc);
}

.select-control .select:focus {
    border-color: var(--control-focus-color, #4299e1);
    box-shadow: var(--control-focus-ring, 0 0 0 3px rgba(66, 153, 225, 0.12));
}

.select-control .select:disabled {
    border-color: var(--control-border-color, #e2e8f0);
    background: var(--control-disabled-bg, #edf2f7);
    cursor: not-allowed;
    color: var(--control-disabled-text, #a0aec0);
}

.select-control .select:open {
    background-color: var(--control-bg, #ffffff);
}