/**
 * Custom VC Elements - Main Styles
 * @package CustomVCElements
 */

/* Base */
.cvc-element {
    position: relative;
    display: block;
    box-sizing: border-box;
}

.cvc-element *,
.cvc-element *::before,
.cvc-element *::after {
    box-sizing: inherit;
}

/* Animations */
.cvc-element--fade-in {
    opacity: 0;
    animation: cvcFadeIn var(--oku-transition-slow) ease forwards;
}

.cvc-element--slide-up {
    opacity: 0;
    transform: translateY(var(--oku-spacing-xl));
    animation: cvcSlideUp var(--oku-transition-slow) ease forwards;
}

@keyframes cvcFadeIn {
    to { opacity: 1; }
}

@keyframes cvcSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Screen Reader */
.cvc-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Print */
@media print {
    .cvc-element {
        break-inside: avoid;
    }
    
    .cvc-element--fade-in,
    .cvc-element--slide-up {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}