$primary-purple: #9333ea; // A slightly darker purple
$primary-blue: #d26cf2; // A darker shade for hover effect
$text-lighter: #cbd5e1; // text-gray-300
$bg-dark: #1f2937; // bg-gray-800
$bg-darker: #111827; // bg-gray-900
$border-blue: #c257e0; // Updated border color to match the new theme
.ufae-control {
    border: 1px solid var(--e-a-border-color-bold);
    padding: 0.5rem;
    border-radius: 5px;
    .ufae-settings {
        display: flex;
        align-items: center;
        white-space: nowrap; // Changed from text-wrap to white-space
        div {
            margin-left: auto;
        }
    }
    .ufae-control-message {
        background-color: var(--e-a-color-danger);
        background-color: #dc2626;
        padding: .5rem;
        border: 1px solid var(--e-a-color-danger);
        margin-top: .8rem;
        border-radius: 5px;
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 1px;
        color: #ffffff;
    }
}

.ufae-tabs {
    display: flex;
    margin-bottom: 1rem;
    .ufae-tab {
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
        border: var(--e-a-border-bold);
        padding: .5rem;
        width: 100%;
        text-align: center;
        border-radius: 0px;
        &:hover {
            background-color: var(--e-a-bg-active-bold);
        }
        &.ufae-tab-active {
            background-color: var(--e-a-bg-active-bold);
        }
    }
}

.ufae-editor-notice {
    position: relative; // For absolute positioning of the close button
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(to bottom right, $bg-dark, $bg-darker);
    color: white;
    padding: 1rem; // p-8
    border-radius: 0.75rem; // rounded-xl
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1); // shadow-2xl
    max-width: 28rem; // max-w-md
    width: 100%;
    border: 1px solid transparent; // Default border, will change dynamically
    transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
    font-family: 'Inter', sans-serif; // Using Inter for a modern look
    // Dismiss button styling
    .ufae-dismiss-button {
        position: absolute;
        top: -9px;
        right: -7px;
        background: none;
        border: none;
        font-size: 1.4rem;
        line-height: 1;
        color: white;
        cursor: pointer;
        -webkit-transition: color 0.2s ease, -webkit-transform 0.2s ease;
        transition: color 0.2s ease, -webkit-transform 0.2s ease;
        transition: color 0.2s ease, transform 0.2s ease;
        transition: color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
        border-radius: 50%;
        background: #eb8efb;
        width: 21px;
        height: 21px;
        &:hover {
            color: white;
            transform: scale(1.1);
        }
        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba($primary-purple, 0.5);
        }
    }
    .ufae-notice-title {
        font-size: .8rem;
        font-weight: 700;
        margin-bottom: .5rem;
        line-height: 1.2;
    }
    .ufae-notice-description {
        font-size: .8rem; // text-lg
        color: $text-lighter;
        line-height: 1.2; // leading-relaxed
        margin-bottom: 1rem; // mb-8
    }
    // Common button/link styles
    .ufae-button-base {
        font-weight: 600; // font-bold
        padding: .3rem .4rem; // py-3 px-8
        border-radius: 100px; // rounded-full
        transition: all 0.3s ease-in-out;
        display: inline-flex; // For aligning text and stars
        text-decoration: none; // Remove underline for links
        cursor: pointer;
        border: none; // Ensure no default button border
        font-size: 12px;
        &:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba($primary-purple, 0.5); // Focus ring
        }
    }
    // Styles for "Leave a Review" link
    .ufae-leave-review-link {
        @extend .ufae-button-base;
        background-color: transparent;
        border: 1px solid white;
        color: white;
        &:hover {
            background-color: $primary-blue;
            color: #141c2a;
            border-color: $primary-blue;
        }
    }
    // Default state if no specific class is added (e.g., show the "Leave a Review" option)
    &:not(.has-reviewed):not(.needs-review) {
        border-color: $border-blue; // Default to the needs-review border
        .ufae-already-reviewed {
            display: none;
        } // Hide "Add Review" button by default
        .ufae-leave-review-link {
            display: inline-flex;
        } // Show "Leave a Review" by default
        .ufae-notice-title {
            color: white;
        }
        .ufae-notice-description {
            color: $text-lighter;
        }
    }
}