.joinchallenge .join-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    background-color: #1683ff;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: 4px solid #dff4ff;
    border-bottom: 4px solid #dff4ff;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
}

.joinchallenge .join-container.has-text {
    display: flex;
    height: 44px;
    justify-content: center;
    align-items: center;
    position: relative;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: none;
    border-bottom: none;
    min-width: 150px;
}

.joinchallenge .join-container .join-inner {
    height: 100%;
    width: 100%;
    background-color: transparent;
    transition: background-color 0.6s ease;
}

.joinchallenge .join-container.has-text .join-inner {
    display: flex;
    height: 44px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: "Metropolis Regular";
    font-size: 17px;
    letter-spacing: 0.221px;
}

.joinchallenge .join-container.completed {
    background-color: #4caf50;
}
.joinchallenge .join-container.transitioning .join-inner {
    background-color: #4caf50;
    animation: fillFromBottom 500ms ease-out forwards;
}

.joinchallenge .join-container.transitioning .join-icon {
    animation: showCheckIcon 500ms ease-out forwards;
}

@keyframes fillFromBottom {
    0% {
        clip-path: inset(100% 0 0 0);
    }
    75% {
        clip-path: inset(25% 0 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes showCheckIcon {
    0% {
        background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/plus_without_background.svg);
    }
    75% {
        background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/check_without_background.svg);
    }
    100% {
        background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/check_without_background.svg);
    }
}

.joinchallenge .message-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 155px;
    height: 38px;
    background-color: #1683ff;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: 3px solid #dff4ff;
    border-bottom: 3px solid #dff4ff;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

.joinchallenge .goToLeaderboard.hide,
.joinchallenge .join-container.hide,
.joinchallenge .message-container.hide {
    display: none;
}

.joinchallenge .join-container .join-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/plus_without_background.svg);
    width: 100%;
    height: 100%;
    background-size: 28px;
    background-position: center;
    background-repeat: no-repeat;
}

.joinchallenge .join-container.completed .join-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/check_without_background.svg);
}

.joinchallenge .join-container .join-text {
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}