@import 'mixins';
@import 'variables';

#experiment-solution-page {
    .submission-status,
    .submission-cancel-confirmation {
        text-align: center;
        padding:40px 0;

        .submission-status-spinner {
            @include font-size(40, 60);
            margin-bottom: 20px;
        }

        .submission-status-title {
            @include font-size(20, 20);
            margin-bottom: 10px;
            font-weight: $fw-semibold;
        }

        .submission-status-status {
            @include font-size(15, 20);
            margin-bottom: 20px;
            font-weight: $fw-regular;
        }
        .confirm-btn,
        .cancel-btn {
            @include font-size(15, 40);
            padding:0 20px;
        }
    }

    .submission-status-timeout {
        text-align: center;

        > .submission-status-spinner {
            font-size: 60px;
        }

        > .submission-status-title {
            font-size: 28px;
            margin-bottom: 20px;
            font-weight: $fw-regular;
        }

        > .submission-status-status {
            width: 60%;
            margin: auto;
            @include font-size(15, 21);
            margin-bottom: 15px;
            font-weight: $fw-regular;
        }

        > .submission-status-button {
            background-color: $color-2;
            width: 35%;
            padding: 10px;
            font-size: 16px;
        }
    }

    .submission-cancel-confirmation {
        .button-group {
            display: flex;
            align-items: center;
            justify-content: space-between;

            button {
                width: 100%;
                margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
}
