.stats,
.goals,
.awards,
.challenge {
    & #scroller {
        background-image: linear-gradient(
            1deg,
            var(--white),
            var(--desert-storm)
        );
    }
}

.dashboard {
    max-width: initial !important;
    padding: 0 !important;

    & .inner,
    & .top-bar {
        max-width: var(--wide-desktop-width);
    }

    & .inner {
        margin: 0 auto;
    }
}

.challenge-online,
.challenge-offline {
    width: 100%;
}

.top-bar {
    @media (--sm-down) {
        margin-right: 20px;
        margin-left: 20px;
        &.with-challenge {
            margin: 0;
        }
    }

    @media (--md-up) {
        margin-right: 20px;
        margin-left: 20px;
        padding: 30px 0 0;
    }

    &,
    .underlined,
    .challenge-bar {
        display: flex;
        justify-content: space-between;
    }

    .underlined {
        flex-grow: 1;
        border-bottom: 1px solid var(--darker-grey);
        width: 100%;

        @media (--xs-only) {
            flex-direction: column;
        }
    }

    nav {
        display: flex;
        align-items: flex-end;

        a {
            margin-inline-end: 25px;
            margin-bottom: -1.5px;
            padding-bottom: 5px;
            color: rgba(0, 0, 0, 0.5);

            &.active {
                color: var(--black);
                border-bottom: 3px solid var(--black);
            }
        }

        h2 {
            font-family: var(--strong-font-family);
            font-size: var(--font-size-lg);
            font-weight: normal;
            display: flex;
            flex-direction: row;
            align-items: center;
            @media (--xs-down) {
                font-size: 20px;
            }
        }

        .badge {
            border-radius: 50%;
            margin-left: 10px;
            width: 22px;
            height: 22px;
            line-height: 20px;
            font-size: var(--font-size-xs);
            font-weight: bold;
            display: flex;
            justify-content: center;
            color: var(--white);
            background: var(--blue);

            [dir='rtl'] & {
                margin-right: 10px;
                margin-left: unset;
            }
        }
    }

    .languages {
        display: flex;
        top: 1px;

        @media (--xs-only) {
            margin-top: 10px;
            flex-direction: column;
            justify-content: space-between;
        }

        @media (--md-up) {
            position: relative;
        }

        & * {
            align-self: end;
            margin-inline-end: 33px;
            padding-bottom: 13.5px;
            font-size: 14px;
            color: var(--warm-grey);

            @media (--xs-only) {
                font-size: var(--font-size-xs);
                margin-inline-end: 0;

                &:first-child {
                    padding-bottom: 3px;
                }
            }

            &:last-child {
                margin-inline-end: 0;
            }
        }

        & label span,
        & select {
            font-size: var(--font-size-xs);
            text-transform: uppercase;
            cursor: pointer;
        }

        & input {
            display: none;
        }

        & input:checked + *,
        & select.selected {
            border-bottom: 1px solid var(--black);
            color: var(--black);
            font-weight: 600;

            @media (--xs-only) {
                border-bottom: 0;
            }
        }

        & select {
            border: none;
            padding-inline-end: 25px;
            width: 0;
            appearance: none;
            font-family: var(--base-font-family);
            background: url('/img/down-arrow.svg') no-repeat top 5px right 5px;
            background-size: 10px;

            @media (--md-down) {
                width: initial;
            }

            &.selected {
                width: initial;
            }

            & option[value='none'] {
                background: grey;
            }
        }
    }
}

.challenge-bar {
    padding: 0 20px;
}

.points {
    height: 40px;
    border-radius: 19px;
    border: solid 1px var(--light-grey);
    background-color: var(--white);
    display: flex;
    line-height: 1.71;
    align-items: center;
    justify-content: center;
    padding: 0 15px;

    margin: 0 10px;

    img {
        width: 14px;
        height: 14px;
    }

    span {
        margin: 0 auto;
    }

    .score {
        margin: 0 10px;
        font-weight: 600;
    }

    .label {
        color: #9b9b9b;
        margin: 0;
    }

    .divider {
        height: 100%;
        margin: 0 10px 0 20px;
        width: 1px;
        background-color: var(--light-grey);
    }
}

.language {
    line-height: 40px;
    color: #9b9b9b;
}

.language-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.17;
    letter-spacing: 0.43px;
    color: var(--black);
    text-transform: uppercase;
    display: inline-block;
    margin-left: 10px;
}

.invite-btn {
    height: 38px;
    min-width: auto;
    max-width: 114px;
    background-color: #629ff4;
    border: 0;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    flex-shrink: 0;

    .plus-icon {
        width: 22px;
        height: 22px;
        background-color: var(--white);
        margin-left: 10px;
        mask-image: url('../../ui/icons/plus.svg');
        mask-size: contain;
    }

    &:hover {
        border: 1px solid var(--black);

        .plus-icon {
            background-color: var(--black);
        }
    }
}
.top-bar.with-challenge nav a.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

@media (--lg-down) {
    .top-bar.with-challenge {
        .challenge-language,
        .points-text {
            display: none;
        }
    }
}
@media (--sm-down) {
    .top-bar.with-challenge {
        .challenge-bar {
            position: absolute;
            width: auto;
            right: 0;
        }
    }
}

@media (--xs-down) {
    .top-bar.with-challenge {
        flex-direction: column-reverse;

        .challenge-bar {
            width: 100%;
            padding: 0;
            margin: 20px 0;
            position: unset;
        }

        .points {
            margin: 0;
        }
        nav {
            width: 100%;
            justify-content: space-between;
            a {
                margin-right: 0;
            }
        }
    }
    .challenge-container {
        padding: 20px 0;
    }
}
