.dropdown-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.scale-dropdown,
.scale-dropdown-2,
.scale-dropdown-3 {
    position: relative;
    min-width: 170px;
    display: inline-block;
    font-size: var(--font-sm);
    background-color: var(--color-white);
    border-radius: 10px;
    border: 1px solid var(--color-border-3);
}

.dropdown-menu,
.dropdown-menu-2,
.dropdown-menu-3 {
    width: 100%;
    max-height: 255px;
    position: absolute;
    top: calc(100% + 5px);
    background-color: var(--color-white);
    border-radius: 10px;
    border: 1px solid var(--color-border-3);
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    z-index: 9;
}

.dropdown-wrapper .scale-dropdown .scale-select,
.dropdown-wrapper .scale-dropdown-2 .scale-select,
.dropdown-wrapper .scale-dropdown-3 .scale-select {
    padding: 15px 20px;
    cursor: pointer;
}

.dropdown-wrapper .scale-dropdown .dropdown-menu > li > a,
.dropdown-wrapper .scale-dropdown-2 .dropdown-menu-2 > li > a,
.dropdown-wrapper .scale-dropdown-3 .dropdown-menu-3 > li > a {
    display: block;
    padding: 10px 20px;
    cursor: pointer;
}

.dropdown-wrapper .scale-dropdown .dropdown-menu > li:nth-child(2) > a,
.dropdown-wrapper .scale-dropdown-2 .dropdown-menu-2 > li:nth-child(2) > a,
.dropdown-wrapper .scale-dropdown-3 .dropdown-menu-3 > li:nth-child(2) > a {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 15px;
}

.dropdown-wrapper .scale-dropdown .dropdown-menu > li:last-child > a,
.dropdown-wrapper .scale-dropdown-2 .dropdown-menu-2 > li:last-child > a,
.dropdown-wrapper .scale-dropdown-3 .dropdown-menu-3 > li:last-child > a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-bottom: 15px;
}

.dropdown-wrapper .scale-dropdown .dropdown-menu > li > a:hover,
.dropdown-wrapper .scale-dropdown-2 .dropdown-menu-2 > li > a:hover,
.dropdown-wrapper .scale-dropdown-3 .dropdown-menu-3 > li > a:hover {
    color: inherit;
    background-color: var(--secondary-bg);
}

@media (max-width: 544px) {
    .scale-dropdown,
    .scale-dropdown-2,
    .scale-dropdown-3 {
        min-width: 130px;
    }

    .dropdown-wrapper .scale-dropdown .scale-select,
    .dropdown-wrapper .scale-dropdown-2 .scale-select,
    .dropdown-wrapper .scale-dropdown-3 .scale-select {
        padding: 12.5px 10px;
    }
}