$prefix: 'fob-';

.#{$prefix}comment {
    &-title {
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 1.5rem;
    }

    &-item {
        &-inner {
            display: flex;
            margin-bottom: 2.5rem;
        }

        &-avatar {
            margin-inline-end: 20px;

            img {
                width: 60px;
                border-radius: 50%;
            }
        }

        &-content {
            width: 100%;
        }

        &-pending {
            display: block;
            color: #5e5e5e;
            margin-bottom: 0.75em;
        }

        &-body {
            p {
                font-size: 16px;
                margin-bottom: 0.75rem;
            }
        }

        &-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        &-author {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 0;
        }

        &-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        &-admin-badge {
            background-color: var(--primary-color);
            color: #ffffff;
            padding: 0.20rem 0.5rem;
            font-size: 12px;
            border-radius: 5px;
        }

        &-date {
            font-size: 14px;
            color: #999999;
            margin-bottom: 0;
        }

        &-reply {
            background-color: transparent;
            color: #888888;
            font-size: 14px;
            display: block;
            font-weight: 400;
            border-bottom: 1px solid rgb(225, 225, 225);
            font-style: italic;
        }

        .#{$prefix}comment-list {
            margin-inline-start: 2.5rem;
        }
    }

    &-form {
        &-section {
            margin: 3rem 0;
        }

        &-note {
            font-size: 14px;
            color: #888888;
            margin-bottom: 1.5rem;
        }

        label {
            &.required {
                &:after {
                    color: #ff0000;
                    content: ' *';
                }
            }
        }
    }
}

.cancel-comment-reply-link {
    font-size: 14px;
    margin-inline-start: 1rem;
    text-decoration: underline;

    &:hover {
        text-decoration: none;
    }
}

[data-bs-theme="dark"] {
    .fob-comment-item-pending {
        color: #c4c1c1;
    }
}