.copyable-container {
    --copyable-bg-color: rgba(var(--color-primary-50-rgb), 0.5);
    --copyable-bg-hover-color: rgba(var(--color-primary-100-rgb), 0.7);
    --copyable-border-color: var(--color-primary-200);
    --copyable-text-color: var(--color-primary-600);
    --copyable-icon-color: var(--color-primary-500);
    --copyable-icon-hover-color: var(--color-primary-700);
    --copyable-tooltip-bg: var(--color-secondary-600);
    --copyable-tooltip-text: var(--color-gray-100);
    --copyable-padding: 0.25rem 0.75rem;
    --copyable-border-radius: 6px;
    --copyable-gap: 0.5rem;
    --copyable-text-size: 1.2em;
    --copyable-icon-size: 0.9em;
}

html.dark .copyable-container {
    --copyable-bg-color: rgba(var(--color-primary-950-rgb), 0.5);
    --copyable-bg-hover-color: rgba(var(--color-primary-900-rgb), 0.7);
    --copyable-border-color: var(--color-primary-900);
    --copyable-text-color: var(--color-primary-400);
    --copyable-icon-color: var(--color-primary-400);
    --copyable-icon-hover-color: var(--color-primary-300);
}

.copyable-container {
    position: relative;
    cursor: pointer !important;
    overflow: visible !important;
}

/* Styles for the copyable containers with the copyable-style class */
.copyable-container.copyable-style {
    display: inline-flex;
    align-items: center;
    gap: var(--copyable-gap);
    background-color: var(--copyable-bg-color);
    border-radius: var(--copyable-border-radius);
    padding: var(--copyable-padding);
    margin: 0 0.25rem;
    border: 1px solid var(--copyable-border-color);
    transition: var(--transition-smooth);
}

/* Add this rule to ensure every styled copyable container has space for an icon */
.copyable-container.copyable-style:not(:has(.copy-icon))::before {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    visibility: hidden;
}

.copyable-container.copyable-style:hover {
    background-color: var(--copyable-bg-hover-color);
}

.copyable-container.copyable-style .copyable-text {
    color: var(--copyable-text-color);
    font-size: var(--copyable-text-size);
}

.copyable-container .copy-icon {
    color: var(--copyable-icon-color);
    font-size: var(--copyable-icon-size);
    width: var(--copyable-icon-size);
    height: var(--copyable-icon-size);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.copyable-container.copyable-style .copy-icon {
    transition: var(--transition-smooth);
}

.copyable-container.copyable-style:hover .copy-icon {
    color: var(--copyable-icon-hover-color);
    transform: scale(1.1);
}

/* Common styles for before/after pseudo-elements */
.copyable-container::before,
.copyable-container::after {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s, opacity 0.2s ease;
}

/* Default positioning (center) */
.copyable-container::before {
    content: attr(data-copy-message, "تم النسخ!");
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--copyable-tooltip-bg);
    color: var(--copyable-tooltip-text);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9em;
    white-space: nowrap;
    z-index: 101;
    direction: inherit; /* Inherit direction from parent by default */
}

/* RTL/LTR specific styling for tooltip text */
.copyable-container[data-tooltip-dir="rtl"]::before {
    direction: rtl;
    /* text-align: right; */
}

.copyable-container[data-tooltip-dir="ltr"]::before {
    direction: ltr;
    /* text-align: left; */
}

.copyable-container::after {
    content: "";
    bottom: calc(100% + 0px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--copyable-tooltip-bg);
}

/* Left positioning */
.copyable-container[data-tooltip-position="left"]::before {
    left: 0;
    transform: translateX(0);
}

.copyable-container[data-tooltip-position="left"]::after {
    left: 10px;
    transform: translateX(0);
}

/* Right positioning */
.copyable-container[data-tooltip-position="right"]::before {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.copyable-container[data-tooltip-position="right"]::after {
    left: auto;
    right: 10px;
    transform: translateX(0);
}

/* Apply visibility and opacity together instantly */
.copyable-container.copied::before,
.copyable-container.copied::after {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

html.dark .copyable-container.copyable-style {
    background-color: var(--copyable-bg-color);
    border-color: var(--copyable-border-color);
}

html.dark .copyable-container.copyable-style .copyable-text {
    color: var(--copyable-text-color);
}

html.dark .copyable-container .copy-icon {
    color: var(--copyable-icon-color);
}

html.dark .copyable-container.copyable-style:hover {
    background-color: var(--copyable-bg-hover-color);
}

html.dark .copyable-container.copyable-style:hover .copy-icon {
    color: var(--copyable-icon-hover-color);
}

/******************
  * Example Usage
*******************/

/*************
  * HTML
**************/

/* With Styling (Center tooltip - default):
<span class="copyable-container copyable-style" 
  data-copy-value="{{ $randomElement }}"
  data-copy-message="Custom copy message" 
  tabindex="0"
  role="button" aria-label="انقر لنسخ رقم التحويل {{ $randomElement }}">
  <i class="copy-icon fa-solid fa-copy"></i> <!-- can be removed -->
  <strong class="copyable-text">{{ $randomElement }}</strong>
</span> */

/* With RTL tooltip text:
<span class="copyable-container copyable-style" 
  data-copy-value="{{ $randomElement }}"
  data-copy-message="نص بالعربية" 
  data-tooltip-dir="rtl"
  tabindex="0"
  role="button" aria-label="انقر لنسخ رقم التحويل {{ $randomElement }}">
  <i class="copy-icon fa-solid fa-copy"></i>
  <strong class="copyable-text">{{ $randomElement }}</strong>
</span> */

/* With LTR tooltip text:
<span class="copyable-container copyable-style" 
  data-copy-value="{{ $randomElement }}"
  data-copy-message="English text" 
  data-tooltip-dir="ltr"
  tabindex="0"
  role="button" aria-label="انقر لنسخ رقم التحويل {{ $randomElement }}">
  <i class="copy-icon fa-solid fa-copy"></i>
  <strong class="copyable-text">{{ $randomElement }}</strong>
</span> */

/* With Left tooltip:
<span class="copyable-container copyable-style" 
  data-copy-value="{{ $randomElement }}"
  data-copy-message="Custom copy message" 
  data-tooltip-position="left"
  tabindex="0"
  role="button" aria-label="انقر لنسخ رقم التحويل {{ $randomElement }}">
  <i class="copy-icon fa-solid fa-copy"></i>
  <strong class="copyable-text">{{ $randomElement }}</strong>
</span> */

/* With Right tooltip:
<span class="copyable-container copyable-style" 
  data-copy-value="{{ $randomElement }}"
  data-copy-message="Custom copy message" 
  data-tooltip-position="right"
  tabindex="0"
  role="button" aria-label="انقر لنسخ رقم التحويل {{ $randomElement }}">
  <i class="copy-icon fa-solid fa-copy"></i>
  <strong class="copyable-text">{{ $randomElement }}</strong>
</span> */

/* Without Styling:
<span class="copyable-container" 
  data-copy-value="{{ $randomElement }}"
  data-copy-message="Custom copy message"
  tabindex="0"
  role="button" aria-label="انقر لنسخ رقم التحويل {{ $randomElement }}">
  <i class="fa-solid fa-copy"></i>
</span> */

/*************
  * JavaScript
*************/

/*
function copyToClipboard(element) {
    const textToCopy = element.dataset.copyValue || element.querySelector('.copyable-text').textContent.trim();
    if (!textToCopy) {
        console.error('No text to copy');
        return;
    }
    navigator.clipboard.writeText(textToCopy).then(
        function() {
            element.classList.add('copied');
            setTimeout(() => {
                element.classList.remove('copied');
            }, 1000);
        }
    );
}
// Handle all copyable elements on the page
$(document).ready(function() {
    // Check if copy icons exist and create them if needed
    $('.copyable-container.copyable-style').each(function() {
        if ($(this).find('.copy-icon').length === 0) {
            // Create icon element
            const copyIcon = document.createElement('i');
            copyIcon.className = 'copy-icon fa-solid fa-copy';
            // Insert as first child of copyable container
            $(this).prepend(copyIcon);
            console.log('Copy icon dynamically created for a copyable container');
        }
    });
    $('.copyable-container').on('keydown', function(event) {
        if (event.key === 'Enter' || event.keyCode === 13) {
            copyToClipboard(this);
        }
    }).on('click', function() {
        copyToClipboard(this);
    });
});
*/