ejplatform/ej-server

.moderate {
    label {
        display: grid;
        text-indent: 0;
        grid-gap: .5rem;
    }

    .hide {display: none;}

    textarea {
        max-width: unset;
        border-radius: .3125rem;
        margin-bottom: .375rem !important;
    }

    .comment-container {
        &__error-message {
            transition: .35s;
            height: 0;
            visibility: hidden;
            color: $color-theme-red;
        }

        &.active {
            textarea {
                animation: background-alert;
                animation-duration: 3s;
                animation-iteration-count: infinite;
            }

            .comment-container__error-message {
                visibility: visible;
                height: inherit;
            }
        }
    }

    .comments-panel {
        display: grid;
        width: 100%;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .5rem;

        &__add-btn {
            text-transform: uppercase;
            font-weight: bold;
            justify-self: start;
            grid-row: 1/span 1;
            grid-column: 1/span 2;
        }

        &__save-btn {
            background-color: $color-theme-dark-blue;
            border-color: $color-theme-dark-blue;
            justify-self: end;
            grid-row: 2/span 1;
            grid-column: 2/span 1;
        }

        &__error-container {
            transition: opacity .5s linear 0s, height .05s linear .5s;
            color: $color-theme-red;
            opacity: 0;
            height: 0;
            font-size: .75rem;
            margin-top: .5rem;
            text-transform: none;

            &.show {
                opacity: 1;
                height: auto;
            }
        }
    }

    .comments-container {
        @extend .left, .pad-b3;

        &__message {color: $color-navigation-header-text;}

        &__save-btn {
            @extend .comments-panel__save-btn;

            float: right;
        }
    }

    .comment {
        @extend .margin-b3, .pad-3;
        background-color: $color-theme-report-light-gray;
        border-radius: .3125rem;
        
        &__text {font-size: 1.125rem;}

        &__details {
            padding-top: .5rem;
            font-size: .875rem;
            margin-bottom: .5rem;

            > * {font-weight: bold}
        }

        &__author {@extend .text-accent;}

        &__date {color: $color-navigation-header-text;}
        
        &__actions {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 2.5rem;
        }
        
        &__action {
            background: none;
            border: none;
            letter-spacing: unset;
            line-height: unset;
            height: unset;
            margin: 0;
            
            border-radius: .3125rem;
            padding: 0.25rem 0.625rem;
            text-transform: lowercase;
            font-weight: bold;
            font-size: 1rem;
            color: $color-black-alternative;

            & > * {transition: 0s;}

            i {margin-left: 0;}
            
            &:hover {box-shadow: unset}
        }

        &.rejected .comment__action.reject-btn,
        &.approved .comment__action.approve-btn {
            color: $color-white;
            background: $color-black-alternative;
        }
    }
}

@keyframes background-alert {
    0%, 100% {background-color: rgba($color-theme-red, 0.05)}
    50% {background-color: rgba($color-theme-red, 0.15)}
}