/* ========== DROPDOWN BASE DESIGN ========== */

.size_switcher {
    position: relative;
    display: inline-block;
    font-family: inherit;
}

/* .size_selected { */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: space-between; */
    /* font-size: 15px; */
    /* padding: 8px 18px; */
    /* cursor: pointer; */
    /* border-radius: 10px; */
    /* border: 1px solid #000000; */
    /* background: #000000; */
    /* backdrop-filter: blur(10px); */
    /* min-height: 36px; */
    /* color: #e8f4ff; */
    /* text-shadow: 0 0 6px rgba(180, 220, 255, 0.7); */
    /* box-shadow: 0 0 12px rgba(255, 255, 255, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.12); */
    /* white-space: nowrap; */ /* wichtig für Breitenmessung */
/* } */

.size_selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    padding: 0px 18px;
    cursor: pointer;
    /* border-radius: 10px; */
    border: 1px solid #000000;
    background: #000000;
    backdrop-filter: blur(10px);
    min-height: 20px;
    color: #e8f4ff;
    /* text-shadow: 0 0 6px rgba(180, 220, 255, 0.7); */
    /* box-shadow: 0 0 12px rgba(255, 255, 255, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.12); */
    white-space: nowrap;
    margin-left: 10px;
    margin-top: 7px;
}

.size_selected:hover {
    background: #000000;
    border-color: rgba(255,255,255,0.40);
}

.size_triangle {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(200,230,255,0.9);
    margin-left: 12px;
}

.size_selected[aria-expanded="true"] .size_triangle {
    transform: rotate(180deg);
}

/* ========== LISTE ========== */

.size_list {
    position: absolute;
    top: calc(100% + 0px);
    left: 10px;
    font-size: 15px;
    display: none;
    list-style: none;
    padding: 10px 0px;
    margin: 0;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* border-radius: 12px; */
    backdrop-filter: blur(12px);
    /* box-shadow: 0 0 18px rgba(120, 180, 255, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.15); */
    z-index: 99999;
    white-space: nowrap;
}

.size_list.open {
    display: block;
}

.size_option {
    padding: 10px 18px;        /* exakt identisch mit .size_selected */
    cursor: pointer;

    color: #e6f2ff;

    white-space: nowrap;       /* kein Umbruch */
    overflow: hidden;          /* falls extrem lange Texte */
    text-overflow: ellipsis;   /* ... bei Overflow */
}

.size_option:hover {
    background: rgba(255,255,255,0.18);
    text-shadow: 0 0 8px rgba(120,180,255,1);
}

.size_selected_label {
    white-space: nowrap;
}