// API Settings Styles

.api-key-field {
    .btn-group {
        .btn {
            border-radius: 0.375rem;
            
            &:first-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            
            &:last-child {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                border-left: 0;
            }
            
            &:hover {
                z-index: 2;
            }
        }
    }
    
    .form-control {
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
        font-size: 0.875rem;

        &[readonly] {
            background-color: #f8f9fa;
            border-color: #dee2e6;
            cursor: not-allowed;

            &:focus {
                background-color: #f8f9fa;
                border-color: #dee2e6;
                box-shadow: none;
            }
        }
    }
}

.api-documentation-card {
    transition: all 0.2s ease-in-out;
    
    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.api-code-example {
    position: relative;
    
    pre {
        border-radius: 0.5rem;
        margin-bottom: 0;
        
        code {
            font-size: 0.8rem;
            line-height: 1.4;
        }
    }
    
    .copy-button {
        opacity: 0.7;
        transition: opacity 0.2s ease-in-out;
        
        &:hover {
            opacity: 1;
        }
    }
}

// Responsive improvements
@media (max-width: 576px) {
    .api-key-field {
        .row {
            .col-auto {
                .btn-group {
                    width: 100%;
                    margin-top: 0.5rem;
                    
                    .btn {
                        flex: 1;
                        border-radius: 0.375rem !important;
                        border-left: 1px solid var(--bs-border-color) !important;
                        
                        &:first-child {
                            border-top-right-radius: 0.375rem !important;
                            border-bottom-right-radius: 0.375rem !important;
                        }
                        
                        &:last-child {
                            border-top-left-radius: 0.375rem !important;
                            border-bottom-left-radius: 0.375rem !important;
                        }
                    }
                }
            }
        }
    }
    
    .api-code-example {
        pre {
            padding: 1rem !important;
            font-size: 0.75rem;
        }
    }
}