@use '../../styles/variables';

.dg-locales-selector {
    position: relative;

    .locales-container {
        background-color: transparent;
        position: absolute;
        top: 100%;
        left: 0;
        width: 80px;
    }

    .locales-menu {
        width: 100%;
        margin-top: 8px;
        padding: 8px 0;
        background-color: variables.$dg-bg-color;
        border-radius: 4px;
        border: 1px solid variables.$dg-gray-200;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;

        .locale {
            cursor: pointer;
            font-size: variables.$dg-font-size-base;
            padding: 0 8px;
            line-height: 36px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:hover {
                background-color: variables.$dg-gray-80;
            }
            &.active {
                color: variables.$dg-primary;
                background-color: #6698ff1a;
            }
        }
    }
}

@mixin dg-locales-selector-theme($color, $hover-color) {
    .dg-locales-selector {
        select {
            color: $color;
        }
        .dg-selector-arrow {
            border-color: $color;
        }
        &:hover {
            select {
                color: $hover-color;
            }
            .dg-selector-arrow {
                border-color: $hover-color;
            }
        }
    }
}

.dg-navbar-theme-default {
    @include dg-locales-selector-theme(inherit, rgba($color: variables.$dg-text-color, $alpha: 0.8));
}

.dg-navbar-theme-angular {
    @include dg-locales-selector-theme(variables.$dg-white, rgba($color: variables.$dg-white, $alpha: 0.8));
}