@import '../../../styles/mixins';
@import '../../../styles/variables';

.dc-controls {
    display: flex;
    align-items: center;
    @include text-size(body-1);

    &__control:not(:last-child),
    &__divider {
        margin-right: 4px;
    }

    &__list {
        padding: 4px 0;

        &_langs {
            width: 120px;
        }
    }

    &__list-icon {
        margin-right: 8px;
        font-size: 22px;
    }

    &__lang-item {
        display: flex;
        padding: 6px 12px;
        width: 100%;
    }

    @media (min-width: map-get($screenBreakpoints, 'md')) {
        &_vertical {
            flex-direction: column;
        }

        &_vertical &__divider {
            height: 1px;
            width: 16px;
        }

        &_vertical &__control:not(:last-child),
        &_vertical &__divider {
            margin-right: 0;
            margin-bottom: 4px;
        }
    }
}