/**
 * project list
 */

.projectsDonate {
    flex-grow: 1;
    width: 100%;
}

.projectsDonate__progressBar {
    position: relative;
    width: 100%;
    height: 2rem;
    margin-bottom: .3rem;
    background: var(--baseLight200);
}

.projectsDonate__progressBarFilled {
    display: inline-block;
    padding: .3rem;
    vertical-align: middle;
    text-align: right;
    background: var(--baseDark900);
}

.projectsDonate__amountPercentage {
    margin-left: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--baseDark900);
}

.projectsDonate__progressBarFilled .projectsDonate__amountPercentage {
    position: relative;
    margin-right: .3rem;
    color: var(--baseLight100);
}

.projectsDonate__amounts {
    margin-bottom: 1.5rem;
    font-size: .8rem;
}

.projectsDonate__amountReceived,
.projectsDonate__amountReceivedText,
.projectsDonate__donateButton {
    font-weight: 600;
}

/**
 * project detail
 */

.projectDetail .projectsDonate {
    position: relative;
    margin-bottom: 3rem;
    padding: var(--innerPaddingX);
    color: var(--baseLight100);
    background: var(--primaryColor500);
}

.projectDetail .projectsDonate__progressBar {
    margin-bottom: 1rem;
}

.projectDetail .projectsDonate__amountPercentage {
    font-size: 1rem;
}

.projectDetail .projectsDonate__amountReceived {
    display: block;
    margin-right: 1rem;
    font-size: 2.3rem;
}

.projectDetail .projectsDonate__amountReceivedText,
.projectDetail .projectDetail__targetAmount {
    font-size: 1.2rem;
}

.projectDetail .projectsDonate__progressBar {
    height: 2.5rem;
}

.projectDetail .projectsDonate__progressBarFilled {
    padding: .5rem;
}

.projectDetail .projectsDonate__donateButton {
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    background: var(--baseDark900);
}

.projectsDonate__disclaimer {
    font-size: .8rem;
}

@media (min-width: 400px) {
    .projectDetail .projectsDonate__amountReceived {
        display: inline;
        margin-right: 1rem;
        font-size: 3rem;
    }

    .projectDetail .projectDetail__targetAmount {
        margin-left: 2rem;
    }
}

@media (min-width: 900px) {
    .projectDetail .projectsDonate {
        position: absolute;
        top: 0;
        right: 0;
        bottom: inherit;
        width: 26rem;
    }

    .projectDetail .projectsDonate.projectsDonate--bottom {
        top: inherit;
        right: 5rem;
        bottom: -16rem;
        z-index: 1;
    }
}