select.formfieldcontrol, select {
    appearance: base-select;
    height: 36px;
    align-items: center;   
    justify-content: space-between;
    border-radius: 16px;
    border-radius: 3px;
    background-color: var(--md-sys-color-surface-container-low); 
    &::picker(select) {
        appearance: base-select;
        border-radius: 12px;
        background-color: var(--md-sys-color-surface-container-low);
        box-shadow: var(--md-sys-elevation-3);
        padding: 1.5px 3px;
        margin-block: 3px;
        border: none;
    }
    &:open::picker(select) {
        display: grid;
        gap: 3px; 
    }
    &::picker-icon {
        display: inline-block;
        content: "\e5c5";
        font-family: 'material symbols outlined';
        font-size: 1rem;
        scale: 1.5;
        transition: transform 0.2s ease-out;
    }
    &:open::picker-icon {
        transform: rotate(180deg);
     }
    option {
        height: 36px;
        padding-block: 1.5px;
        padding-inline: 9px;
        border-radius: 9px;
        display: flex;   
        gap: 6px;
        cursor: pointer;
        font: var(--md-sys-typescale-label-L);
        &::checkmark {
            content: "\e5ca";
            display: inline;
            width: auto;
            font-family: 'material symbols outlined';
            color: black;
            flex: 0;
            display: none;
        }
        &:checked::checkmark {
            display: block;
        }
    }
    & :checked {
        background-color: var(--md-sys-color-tertiary-container);
    }
}

.filled-md3form .formfield_field:has(.formfieldcontrol:open)::after {
     transform: scaleX(1)
    }
}