/* ===== STILI PER SELECT NATIVO ===== */
/* Adattamento degli stili della dropdown per elemento select nativo */

/* Stile base per select compatibile con form-control */
select.save-select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-family: var(--save-font-primary);
    font-size: var(--save-font-size-base);
    font-weight: var(--save-font-weight-regular);
    line-height: var(--save-line-height);
    color: var(--save-input-text);
    background-color: var(--save-white);
    border: 1px solid var(--save-input-border);
    border-radius: var(--save-border-radius);
    box-sizing: border-box;
    transition: border-color var(--save-transition), box-shadow var(--save-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 40px;
    position: relative;
}

/* Stili per il select con label flottante - questo è usato nell'HTML */
.save-input-floating select.save-select {
    height: 48px;
    padding-top: 16px;
    padding-bottom: 0;
}

/* Aggiungiamo l'icona chevron-south con un pseudo-elemento dopo il contenitore - SOLO PER SELECT */
.save-input-floating:has(select.save-select)::after {
    content: "\e914"; /* icon-chevron-south - ICONA PREDEFINITA */
    font-family: 'icomoon' !important;
    position: absolute;
    right: 16px;
    top: 10px; /* Posizionamento corretto per il container flottante */
    font-size: 24px;
    pointer-events: none;
    z-index: 2;
}

/* Quando la select ha focus, cambia l'icona a chevron-north - SOLO PER SELECT */
.save-input-floating:has(select.save-select):focus-within::after {
    content: "\e913"; /* icon-chevron-north */
}

/* Quando la classe 'has-value' è presente (aggiunta da JS), forza l'icona a chevron-south anche con focus - SOLO PER SELECT */
.save-input-floating.has-value:has(select.save-select)::after {
    content: "\e914" !important; /* icon-chevron-south - FORZATO */
}

/* Opacità ridotta quando disabilitato - usato con ng-disabled - SOLO PER SELECT */
.save-input-floating:has(select.save-select:disabled)::after {
    opacity: 0.6;
}

/* Stili hover e focus - usati nell'HTML */
select.save-select:hover:not(:disabled) {
    border-color: var(--save-gray-75);
}

select.save-select:focus:not(:disabled) {
    outline: none;
    border-color: var(--save-input-border-focus);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* Per select disabilitato - usato con ng-disabled */
select.save-select:disabled {
    background-color: var(--save-input-disabled-bg);
    color: var(--save-input-text);
    cursor: not-allowed;
    border-color: var(--save-input-disabled-border);
    opacity: 1;
}

/* Styling per option all'interno del select */
select.save-select option {
    font-family: var(--save-font-primary);
    font-size: var(--save-font-size-base);
    font-weight: var(--save-font-weight-regular);
    padding: 8px;
    background-color: var(--save-white);
    color: var(--save-black);
}