/* Copy to Clipboard Button Styles */

.copy-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.copy-input-wrapper input,
.copy-input-wrapper textarea {
    flex: 1;
    padding-right: 36px !important;
}

.copy-input-wrapper textarea {
    padding-right: 36px !important;
}

.copy-input-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 0.875rem;
    padding: 4px 8px;
    transition: all 0.2s ease;
    opacity: 0;
    z-index: 10;
}

/* Show icon on hover for input wrapper */
.copy-input-wrapper:hover .copy-input-icon {
    opacity: 1;
    color: #495057;
}

/* Keyboard focus state */
.copy-input-wrapper input:focus ~ .copy-input-icon,
.copy-input-wrapper textarea:focus ~ .copy-input-icon {
    opacity: 1;
    color: #495057;
}

/* Success state */
.copy-input-icon.copy-success {
    color: #28a745;
}

/* Active/Pressed state */
.copy-input-icon:active {
    transform: translateY(-50%) scale(0.95);
}

/* Accessibility - focus visible state */
.copy-input-icon:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    opacity: 1;
}

/* Dark mode support (if using dark theme) */
@media (prefers-color-scheme: dark) {
    .copy-input-icon {
        color: #adb5bd;
    }

    .copy-input-wrapper:hover .copy-input-icon {
        color: #dee2e6;
    }

    .copy-input-wrapper input:focus ~ .copy-input-icon,
    .copy-input-wrapper textarea:focus ~ .copy-input-icon {
        color: #dee2e6;
    }
}

/* Responsive adjustment for small screens */
@media (max-width: 576px) {
    .copy-input-icon {
        opacity: 0.6;
    }
}