/**
 * Recording Thumbnail Uploader Styles
 */

.zmeet-recording-card-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;

    /* Ensure the recording card maintains its layout */
    .zmeet-recording-card,
    .zmeet-featured-card,
    .zmeet-featured-thumbnail,
    .zmeet-archive-sidebar-item {
        width: 100%;
    }
}

.zmeet-thumbnail-controls {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    button {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid transparent;
        font-weight: 500;

        &.zmeet-upload-thumbnail-btn {
            background-color: #0073aa;
            color: #fff;
            border-color: #0073aa;

            &:hover {
                background-color: #006799;
                border-color: #006799;
            }
        }

        &.zmeet-remove-thumbnail-btn {
            background-color: #f0f0f1;
            color: #d63638;
            border-color: #dcdcde;

            &:hover {
                background-color: #f6f7f7;
                border-color: #c3c4c7;
                color: #a32b2d;
            }
        }

        &.loading {
            opacity: 0.7;
            cursor: wait;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }
}

/* Fix for Double Play Icon Issue */
/* Ensure we don't accidentally show dual play icons if the logic allows it */
.zmeet-recording-thumbnail,
.zmeet-featured-thumbnail {
    position: relative;

    .zmeet-recording-play-overlay,
    .zmeet-featured-play-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.2);
        /* Slight darken for contrast */
        opacity: 0.9;
        transition: opacity 0.2s ease;
        z-index: 10;
        /* Ensure it stays on top */

        svg {
            width: 48px;
            height: 48px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        &:hover {
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.1);

            svg {
                transform: scale(1.1);
                transition: transform 0.2s ease;
            }
        }
    }
}

/* Notification Styles */
.zmeet-thumbnail-notice {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;

    &.zmeet-thumbnail-notice-success {
        background-color: #46b450;
    }

    &.zmeet-thumbnail-notice-error {
        background-color: #dc3232;
    }

    .zmeet-thumbnail-notice-close {
        background: none;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        opacity: 0.8;

        &:hover {
            opacity: 1;
        }
    }
}