.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--box_bg);
    width: 100px;
    max-height: 50vh;
    overflow-y: auto;
    font-size: 14px;
    font-family: 'open-sans';
    text-align: center;
    transform: translate(-15%);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--box_border);
    border-radius: 8px;
    z-index: 1;

    .lang-list {
        display: block;
        margin: 0px;
        padding: 8px 5px;
        transition: 0.05s;
        cursor: pointer;

        &:hover,
        &:focus {
            background-color: var(--purple_gradient_1);
            color: var(--body_color_2);
        }

        &:not(:last-child) {
            border-bottom: 1px solid var(--box_border);
        }
    }

    .dropdown-item {
        display: block;
        margin: 0px;
        padding: 8px 5px;
        transition: 0.05s;
        cursor: pointer;

        &:hover,
        &:focus {
            background-color: var(--purple_gradient_1);
            color: var(--body_color_2);
        }

        &:not(:last-child) {
            border-bottom: 1px solid var(--box_border);
        }
    }
}

@media all and (max-width: 800px) {
    .dropdown-content {
        transform: translate(-35%);
    }
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}