/* Import all try-out components */
@import 'variables.css';
@import 'fab.css';
@import 'modal.css';
@import 'form.css';
@import 'tabs.css';
@import 'key-value.css';
@import 'buttons.css';
@import 'response.css';

/* Global try-out styles */
.try-out-modal *,
.response-modal *,
.try-out-fab * {
    box-sizing: border-box;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Focus management */
.try-out-modal .modal-content:focus {
    outline: none;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.2s ease-out;
}

.fade-out {
    animation: fadeOut 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}
