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

.review-wrapper {
    @media (--md-down) {
        padding: 20px;
    }

    & .cards-and-instruction {
        height: 100%;

        & .instruction {
            margin: 2vh auto;

            span {
                display: flex;

                svg {
                    margin-inline: 8px;

                    path {
                        fill: var(--light-purple);
                    }
                }
            }
        }

        & .cards-and-guidelines {
            display: flex;

            @media (--md-down) {
                flex-direction: column;
                align-items: center;
            }

            & .placeholder {
                display: block;
                flex: 0.7;

                @media (--md-down) {
                    display: none;
                }
            }
        }

        & .cards {
            position: relative;
            max-width: 700px;
            height: 200px;
            width: 100%;

            @media (--md-down) {
                margin-bottom: 36px;
            }

            @media (--md-up) {
                max-height: 430px;
                height: 43vh;
            }

            & .card {
                position: absolute;
                left: 0;

                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                width: 100%;
                height: 100%;

                background: var(--white);
                box-shadow: 0 6px 19px 0 rgba(0, 0, 0, 0.05);
                overflow: auto;
                word-wrap: break-word;

                opacity: 1;
                transition: transform var(--transition-duration-slow)
                        var(--easing),
                    opacity var(--transition-duration-slow) var(--easing);

                @media (--lg-up) {
                    min-height: 320px;
                }

                &.inactive {
                    pointer-events: none;
                    opacity: 0.5;
                    filter: blur(6px);
                }

                & .sentence {
                    width: 100%;
                }
            }
        }

        & .rules {
            @media (--md-down) {
                width: 100%;
                max-width: 700px;

                li {
                    width: auto;
                }
            }
        }

        .card-dimensions {
            padding: 0 20px;

            text-align: center;
            font-weight: 600;
            line-height: 1.38;

            background: var(--white);

            & .source {
                font-size: var(--font-size-sm);
                color: var(--near-black);
            }

            @media (--md-up) {
                padding: 0 25px;
                font-size: var(--font-size-lg);
                font-weight: normal;
                letter-spacing: 1.2px;
                line-height: 1.5;
            }

            @media (--lg-up) {
                padding: 50px 50px 0;
            }
        }
    }

    & .waves {
        margin-top: 9vh;
        background: url('./images/review-waves.png');
        background-size: 100% 100%;
        height: 15px;
        display: flex;
        align-items: center;

        @media (--tall) {
            margin-top: 14vh;
        }

        & .vote-buttons {
            display: flex;
            margin: 0 auto;
            width: fit-content;

            button {
                width: 150px;
                height: 57px;
                border-radius: 50px;
                background-color: var(--white);
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 20px;
                text-transform: uppercase;
                font-weight: 600;
                color: var(--black);
                cursor: pointer;

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

                @media (--sm-down) {
                    width: 100px;
                }

                svg {
                    margin-right: 12px;

                    [dir='rtl'] & {
                        margin-left: 12px;
                    }
                }

                & {
                    transition: all var(--transition-duration) linear;
                }
            }

            & .yes-button {
                box-shadow: 0px 4px 10px rgba(89, 203, 183, 0.3);

                &:hover,
                &:active {
                    background: var(--valid-green);
                    box-shadow: var(--vote-button-box-shadow)
                        color-mod(var(--valid-green) alpha(70%));
                }
            }

            & .no-button {
                box-shadow: 0px 4px 10px rgba(255, 79, 94, 0.3);
                margin-right: 0;

                &:hover,
                &:active {
                    background: var(--red);
                    box-shadow: var(--vote-button-box-shadow)
                        color-mod(var(--red) alpha(60%));
                }
            }

            & .skip-button {
                box-shadow: 0px 4px 10px rgba(74, 74, 74, 0.3);
                min-width: fit-content;

                @media (--sm-down) {
                    min-width: 120px;
                }

                & svg {
                    [dir='rtl'] & {
                        transform: rotateY(180deg);
                    }
                }
            }

            & .skip-text {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        @media (--md-down) {
            margin: 12vh auto 0;
            width: 100%;
        }
    }

    & .buttons {
        display: flex;
        margin-top: 8.5vh;
        margin-bottom: 20px;

        @media (--md-down) {
            justify-content: center;
        }

        > * {
            display: flex;
            align-items: center;
        }

        & .guidelines-button {
            svg {
                margin-inline-end: 10px;

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

            @media (--md-down) {
                border: none;
            }
        }

        & .open-report-button {
            @media (--md-down) {
                border: none;
            }
        }

        & .button {
            height: 57px;
            min-width: auto;
            padding: 0 38px;
            width: auto;
            margin-inline-end: 20px;
        }

        & .button.shortcuts-button {
            margin-inline-end: 0;
            width: 60px;
            padding: 0;
        }
    }

    & .empty-container {
        margin-bottom: auto;
        display: flex;
        flex-direction: column;
        align-items: center;

        & .error-card {
            margin: 75px auto;
            padding: 30px 25px;
            max-width: 700px;
            width: 100%;

            display: flex;
            flex-direction: column;
            justify-content: center;

            background: var(--white);
            box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.05);

            h1 {
                font-weight: 400;
                font-size: 2em;
                margin-bottom: 0.5em;
            }

            p {
                font-size: 1.25em;
            }

            @media (--md-up) {
                padding: 120px 105px;
            }

            .button {
                margin-top: 30px;
                border: none;
                background: var(--red);
                box-shadow: 0 5px 10px color-mod(var(--red) alpha(50%));
                text-transform: uppercase;

                &:hover {
                    color: var(--white);
                    opacity: 1;
                    background: var(--red);
                    box-shadow: 0 5px 10px var(--red);

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

        & .no-sentences-available {
            .button {
                background: var(--blue);
                box-shadow: 0 5px 10px color-mod(var(--blue) alpha(50%));

                &:hover {
                    background: var(--blue);
                    box-shadow: 0 5px 10px var(--blue);
                }
            }
        }

        .speak-sc-icon {
            margin-inline-end: 10px;
            path {
                fill: var(--white);
            }
        }
    }
}
