/* Default Styles */
.copy-container {
    position: relative;
}

.copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 8px 16px;
    background-color: transparent;
    color: var(--text-color, #333); /* Default text color (light mode: #333, dark mode: #fff) */
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    border: 2px solid var(--border-color, #ccc); /* Default border (light mode: #ccc, dark mode: #444) */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .copy-button {
        color: var(--text-color, #fff); /* White text in dark mode */
        border-color: var(--border-color, #444); /* Darker border in dark mode */
    }

    .copy-button:hover {
        background-color: var(--hover-bg, #333); /* Dark hover effect */
        border-color: var(--hover-border, #555);
    }

    .copy-button:active {
        background-color: var(--active-bg, #222); /* Darker active effect */
    }
}

/* Light Mode */
@media (prefers-color-scheme: light) {
    .copy-button:hover {
        background-color: var(--hover-bg, #f0f0f0); /* Lighter hover effect */
        border-color: var(--hover-border, #bbb);
    }

    .copy-button:active {
        background-color: var(--active-bg, #ddd); /* Lighter active effect */
    }
}

/* Additional global color variables */
:root {
    --text-color: #333; /* Default text color */
    --border-color: #ccc; /* Default border color */
    --hover-bg: #f0f0f0; /* Light mode hover background */
    --hover-border: #bbb; /* Light mode hover border */
    --active-bg: #ddd; /* Light mode active background */
}