/*
 * Citizen - Translate Styles
 * https://starcitizen.tools
*/

@import '../resources/variables.less';
@import '../resources/mixins.less';

.mw-pt-languages {
    display: block;
    border: 0;
    width: auto;
    background: 0;
    margin: 0 @negative-margin;
    padding: @margin-side;
}

.mw-pt-languages-label {
    display: block;
    border: 0;
    padding: 0;
    color: @base-30;
    background: 0;
    font-size: 0.8125rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: auto;

}

.mw-pt-languages-list {
    padding: @content-margin-top 0 0 0;
    display: flex;
    width: auto;
    visibility: hidden; // Hide dots

    >* {
        visibility: visible;
    }
}

.mw-pt-languages-selected,
.mw-pt-languages-ui {
    font-weight: 400;
    .boxshadow(2) !important;

    &:hover {
        transform: none !important;
    }
}

.mw-pt-progress {
    margin: 0 0 @margin-side / 2 0;
    padding: @margin-side / 4 @margin-side / 2;
    display: block;
    border: 1px solid @base-90;
    background: @base-90;
    color: @base-30;
    font-size: @content-caption-size;
    .boxshadow(1);
    transition: @transition-transform-quick,
        @transition-box-shadow-quick;

    &:hover {
        .boxshadow(2);
        transform: translateY(-2px);
    }
}

.mw-pt-progress--stub {
    background: @base-90;
}

.mw-pt-progress--low {
    background: @red-50;
    border-color: @red-50;
    ;
    color: @base-100!important; // bypass visited styles
}

.mw-pt-progress--med {
    background: @yellow-50;
    border-color: @yellow-50;
    color: @base-100!important; // bypass visited styles
}

.mw-pt-progress--high {
    background: @green-50;
    border-color: @green-50;
    color: @base-100!important; // bypass visited styles
}

.mw-pt-progress--complete {
    background: @green-30;
    border-color: @green-30;
    color: @base-100!important; // bypass visited styles
}

@media only screen and (max-width: @screen1) {
    .mw-pt-languages {
        margin: 0 !important; // somehow got overrided
        padding: @margin-side 0;
    }
}

@media only screen and (max-width: @screen2) {
    .mw-pt-languages {
        margin: 0~"calc((100vw - @{page-width}) / -2)";
    }
}