@use "../mixins" as *;
@use "../media" as *;

.dropdown {

    &__wrapper {
        position: relative;
        user-select: none
    }

    &__button {
        @include flex-center(space-between);

        column-gap: 10px;
        height: var(--button-height);
        padding-inline: 15px;
        border: none;
        border-radius: var(--border-radius-15);
        background-color: var(--color-light-accent);
        color: inherit;
        transition: background-color var(--transition-duration-03), box-shadow 0.13s ease;

        @include hover {
            background-color: var(--color-light-accent-2);
        }

        &:is(:active, :focus) {
            background-color: var(--color-light);
            box-shadow: inset 0 0 0 1.5px var(--color-accent-80);
        }

        @include mobile-s {
            height: 50px;
            padding-inline: 10px;
        }
    }

    &__arrow {
        transition: transform var(--transition-duration-03);

        &--rotated {
            transform: rotate(180deg);
        }

        & svg {
            display: block;
        }
    }

    &__lang-list {
        max-height: 0;
        opacity: 0;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: var(--color-light);
        width: 100%;
        min-width: 100px;
        border-radius: var(--border-radius-15);
        border: 1px solid var(--color-light-accent-3);
        box-shadow: 0 4px 40px 0 var(--color-box-shadow);
        margin-top: 7px;
        overflow: hidden;
        z-index: 1000;
        transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in;

        &--visible {
            max-height: 400px;
            opacity: 1;
            transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in;
        }
    }

    &__lang-item a {
        @include flex-center(flex-start);

        column-gap: 10px;
        padding: 15px;

        @include hover {
            background-color: var(--color-light-accent-2);
            cursor: pointer;
        }
    }
}

.lang {
    font-size: var(--font-size-alt);
}

.flag {
    width: 34px;
    height: 24px;
    border-radius: var(--border-radius-3);

    & img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
}