@import "/UI/Core/Styles/Theme.scss";

ReportPrompt {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;

    root {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 500px;
        left: 0;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .report-prompt-overlay {
        align-items: center;
        justify-content: center;
        pointer-events: all;
    }

    .report-prompt-panel {
        @include menu-surface();
        flex-direction: column;
        gap: 12px;
        width: 400px;
        padding: 24px;
    }

    .report-title {
        font-size: 16px;
        font-weight: 600;
        color: rgba( 255, 255, 255, 0.92 );
        text-shadow: none;
        text-align: center;
    }

    .report-subtitle {
        font-size: 13px;
        color: rgba( 255, 255, 255, 0.72 );
        text-shadow: none;
    }

    .report-actions {
        flex-direction: row;
        gap: 10px;
        justify-content: center;
    }

    UIButton .ui-button.report-btn {
        min-width: 140px;
        justify-content: center;
    }

    UIButton .ui-button.report-btn--report {
        background-color: rgba( $traitor-red, 0.3 );
        border: 1px solid rgba( $traitor-red, 0.5 );
    }

    UIButton .ui-button.report-btn--report:hover:not(.disabled) {
        background-color: rgba( $traitor-red, 0.5 );
    }

    UIButton .ui-button.report-btn--forgive {
        background-color: rgba( 60, 160, 60, 0.3 );
        border: 1px solid rgba( 60, 160, 60, 0.5 );
    }

    UIButton .ui-button.report-btn--forgive:hover:not(.disabled) {
        background-color: rgba( 60, 160, 60, 0.5 );
    }

    UIButton .ui-button.report-btn--submit {
        background-color: rgba( $traitor-red, 0.3 );
        border: 1px solid rgba( $traitor-red, 0.5 );
    }

    UIButton .ui-button.report-btn--submit:hover:not(.disabled) {
        background-color: rgba( $traitor-red, 0.5 );
    }

    .report-text-input {
        width: 100%;
    }
}