.cevi-ui-icon,
.__cevi-ui-button-icon-download,
.__cevi-ui-button-icon-save,
.__cevi-ui-button-icon-disk,
.__cevi-ui-button-icon-edit,
.__cevi-ui-button-icon-cancel,
.__cevi-ui-button-icon-delete,
.__cevi-ui-button-icon-upload,
.__cevi-ui-button-icon-search,
.__cevi-ui-button-icon-reset,
.__cevi-ui-button-icon-add,
.__cevi-ui-button-icon-confirmation,
.__cevi-ui-button-icon-go-back,
.__cevi-ui-button-icon-chevron-up,
.__cevi-ui-button-icon-expand,
.__cevi-ui-button-icon-chevron-left,
.__cevi-ui-button-icon-collapse,
.__cevi-ui-button-icon-table,
.__cevi-ui-button-icon-ban,
.__cevi-ui-button-icon-circle-check,
.__cevi-ui-button-icon-drawer,
.__cevi-ui-button-icon-file-pen,
.__cevi-ui-button-icon-portal-open,
.__cevi-ui-button-icon-portal-close,
.__cevi-ui-button-icon-eraser,
.__cevi-ui-button-icon-sliders,
.__cevi-ui-button-icon-warning-triangle,
.__cevi-ui-button-icon-users,
.__cevi-ui-button-icon-gear,
.__cevi-ui-button-icon-ellipsis-vertical,
.__cevi-ui-button-icon-filter,
.__cevi-ui-button-icon-pen-to-square,
.__cevi-ui-button-icon-trash-xmark,
.__cevi-ui-button-icon-filter-circle-xmark,
.__cevi-ui-button-icon-circle-info,
.__cevi-ui-button-icon-box-archive,
.__cevi-ui-button-icon-rocket,
.__cevi-ui-button-icon-paper-plane {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cevi-icon-size, 1em);
    height: var(--cevi-icon-size, 1em);
    line-height: 1;
    vertical-align: middle;
}

.cevi-ui-icon svg,
.__cevi-ui-button-icon-download svg,
.__cevi-ui-button-icon-save svg,
.__cevi-ui-button-icon-disk svg,
.__cevi-ui-button-icon-edit svg,
.__cevi-ui-button-icon-cancel svg,
.__cevi-ui-button-icon-delete svg,
.__cevi-ui-button-icon-upload svg,
.__cevi-ui-button-icon-search svg,
.__cevi-ui-button-icon-reset svg,
.__cevi-ui-button-icon-add svg,
.__cevi-ui-button-icon-confirmation svg,
.__cevi-ui-button-icon-go-back svg,
.__cevi-ui-button-icon-chevron-up svg,
.__cevi-ui-button-icon-expand svg,
.__cevi-ui-button-icon-chevron-left svg,
.__cevi-ui-button-icon-collapse svg,
.__cevi-ui-button-icon-table svg,
.__cevi-ui-button-icon-ban svg,
.__cevi-ui-button-icon-circle-check svg,
.__cevi-ui-button-icon-drawer svg,
.__cevi-ui-button-icon-file-pen svg,
.__cevi-ui-button-icon-portal-open svg,
.__cevi-ui-button-icon-portal-close svg,
.__cevi-ui-button-icon-eraser svg,
.__cevi-ui-button-icon-sliders svg,
.__cevi-ui-button-icon-warning-triangle svg,
.__cevi-ui-button-icon-users svg,
.__cevi-ui-button-icon-gear svg,
.__cevi-ui-button-icon-ellipsis-vertical svg,
.__cevi-ui-button-icon-filter svg,
.__cevi-ui-button-icon-pen-to-square svg,
.__cevi-ui-button-icon-trash-xmark svg,
.__cevi-ui-button-icon-filter-circle-xmark svg,
.__cevi-ui-button-icon-circle-info svg,
.__cevi-ui-button-icon-box-archive svg,
.__cevi-ui-button-icon-rocket svg,
.__cevi-ui-button-icon-paper-plane svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cevi-ui-button__content,
.cevi-ui-button__leading,
.cevi-ui-button__trailing,
.cevi-ui-button__icon {
    display: inline-flex;
    align-items: center;
}

.cevi-ui-button__content {
    gap: 0.5rem;
}

.cevi-ui-button__leading,
.cevi-ui-button__trailing {
    flex-shrink: 0;
}

.cevi-ui-button__icon {
    opacity: 0.9;
    transition: opacity 0.2s ease-in-out;
}

.cevi-ui-button__icon svg {
    display: block;
    width: var(--cevi-icon-size, 1em);
    height: var(--cevi-icon-size, 1em);
}

.cevi-ui-button__icon > i {
    line-height: 1;
}

.cevi-ui-button__icon--small {
    font-size: 1rem;
}

.cevi-ui-button__icon--medium {
    font-size: 1.25rem;
}

.cevi-ui-button__icon--large {
    font-size: 1.5rem;
}

.cevi-ui-button__icon--xlarge {
    font-size: 2rem;
}

.cevi-ui-button__spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.15rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cevi-ui-icon-spin 0.75s linear infinite;
}

.cevi-ui-icon__animation--beat,
.cevi-ui-icon__animation--beat-fade,
.cevi-ui-icon__animation--spin,
.cevi-ui-icon__animation--spin-pulse,
.cevi-ui-icon__animation--spin-reverse,
.cevi-ui-icon__animation--bounce,
.cevi-ui-icon__animation--flip,
.cevi-ui-icon__animation--shake {
    transform-origin: center;
    will-change: transform, opacity;
}

.cevi-ui-icon__animation--beat {
    animation: cevi-ui-icon-beat 0.9s ease-in-out infinite;
}

.cevi-ui-icon__animation--beat-fade {
    animation: cevi-ui-icon-beat-fade 1.15s ease-in-out infinite;
}

.cevi-ui-icon__animation--spin {
    animation: cevi-ui-icon-spin 0.9s linear infinite;
}

.cevi-ui-icon__animation--spin-pulse {
    animation: cevi-ui-icon-spin 1s linear infinite, cevi-ui-icon-pulse 1.35s ease-in-out infinite;
}

.cevi-ui-icon__animation--spin-reverse {
    animation: cevi-ui-icon-spin 0.9s linear infinite reverse;
}

.cevi-ui-icon__animation--bounce {
    animation: cevi-ui-icon-bounce 0.95s ease-in-out infinite;
}

.cevi-ui-icon__animation--flip {
    animation: cevi-ui-icon-flip 1.1s ease-in-out infinite;
    transform-style: preserve-3d;
}

.cevi-ui-icon__animation--shake {
    animation: cevi-ui-icon-shake 0.7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cevi-ui-icon__animation--beat,
    .cevi-ui-icon__animation--beat-fade,
    .cevi-ui-icon__animation--spin,
    .cevi-ui-icon__animation--spin-pulse,
    .cevi-ui-icon__animation--spin-reverse,
    .cevi-ui-icon__animation--bounce,
    .cevi-ui-icon__animation--flip,
    .cevi-ui-icon__animation--shake {
        animation: none !important;
    }
}

@keyframes cevi-ui-icon-beat {
    0%,
    100% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.12);
    }

    70% {
        transform: scale(0.96);
    }
}

@keyframes cevi-ui-icon-beat-fade {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(1.08);
    }
}

@keyframes cevi-ui-icon-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

@keyframes cevi-ui-icon-bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-0.18em);
    }

    60% {
        transform: translateY(0.06em);
    }
}

@keyframes cevi-ui-icon-flip {
    0%,
    100% {
        transform: perspective(3rem) rotateY(0deg);
    }

    50% {
        transform: perspective(3rem) rotateY(180deg);
    }
}

@keyframes cevi-ui-icon-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-0.1em);
    }

    40%,
    80% {
        transform: translateX(0.1em);
    }
}

@keyframes cevi-ui-icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}