.lang-button {
    &__container {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: min(0.75rem, 0.7vw);
        border: 1px solid rgba(255, 255, 255, 0.2);
        height: 100%;
        transition: border-color 0.3s ease;

        &:hover {
            border-color: rgba(255, 255, 255, 0.4);
        }
    }

    &__button {
        text-transform: uppercase;
        color: var(--color-text);
        font-size: clamp(0.5rem, 1.1vw, 1.188rem);
        margin: 0 auto;
        min-width: 30px;
        padding-left: var(--space-xs-x);
        padding-right: var(--space-xs-x);
        transition: font-weight 0.3s ease, scale 0.3s ease;

        @media (min-width: 1224px) {
            min-width: 40px;
        }

        &:hover {
            font-weight: var(--font-weight-normal);
        }
        &:active {
            font-weight: var(--font-weight-normal);
            scale: 0.8;
        }
    }

    &__glider {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        border-radius: min(0.75rem, 0.7vw);
        border: 1px solid var(--color-text);
        transition: transform 0.3s ease;
        z-index: -1;
    }

    &__container--1 &__glider {
        transform: translateX(0);
    }

    &__container--2 &__glider {
        transform: translateX(100%);
    }
}