@import url('../../../media.css');

.dataset-download-prompt {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .input-group {
        padding: 1rem;
        @media (--sm-down) {
            width: 100%;
        }

        &.button-container {
            display: flex;
            flex: 0 1 40%;
            align-content: space-around;

            @media (--sm-down) {
                flex-direction: column;
            }

            & .why-email {
                width: 300px;
            }
        }
    }

    .show-email-form {
        width: auto;
        height: auto;
        margin-bottom: 20px;

        @media (--md-up) {
            white-space: nowrap;
            margin-bottom: 0;
        }

        span {
            margin-inline-end: 20px;
        }

        &:hover {
            path {
                fill: var(--black);
            }
        }
    }

    .email-button svg {
        margin-inline-start: 1em;
    }

    .why-email,
    .why-donate {
        margin-top: 1rem;
        font-size: var(--font-size-xs);
        color: var(--warm-grey);
    }

    .why-donate {
        text-align: left;
    }

    & .donate-btn-container {
        @media (--md-up) {
            margin-inline-start: 24px;
        }

        @media (--sm-down) {
            margin-block-start: 20px;
        }

        & .donate-btn {
            height: 3.5rem;
            background: var(--valid-green);

            @media (--md-up) {
                width: 255px;
            }
        }
    }

    .checksum {
        font-size: var(--font-size-xs);
        color: var(--warm-grey);
        margin-bottom: 1rem;
        cursor: pointer;

        p {
            overflow-wrap: anywhere;
        }
    }

    .download-language {
        max-width: 300px;
        justify-content: space-between;
        height: fit-content;

        &:not([href]) {
            background: var(--warm-grey);
            cursor: not-allowed;

            &:hover {
                border-color: transparent;
                background: var(--warm-grey);
                color: var(--white);

                path {
                    fill: var(--white);
                }
            }
        }

        > :first-child {
            margin-inline-end: 10px;
        }
    }

    .labeled-checkbox {
        margin-top: 0.75rem;
        margin-bottom: 2rem;
    }
}

.dataset-download-prompt--light {
    .label {
        background: var(--segment-background);
        color: #fff;
    }

    .checkbox-container {
        border-color: var(--white);
        color: var(--white);
    }

    input {
        background: var(--segment-background);
        color: #fff;
        &:focus {
            border-color: var(--grey);
        }
    }
}
