/* Styles that need relatively positioned parent - START */

.center-xy, .center-y, .center-x {
    position: absolute;
}

.center-y, .center-xy {
    top: 50%;
    @apply -translate-y-1/2;
}

.center-x, .center-xy {
    left: 50%;
    @apply -translate-x-1/2;
}

/* Styles that need relatively positioned parent - END */

/* Spin animation */
.gear-icon {
    height: auto;
    fill: var(--color-neutral-white)
}
.infinite-animation {
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.spin-clockwise-10 {
    animation-name: spin-clockwise;
    animation-duration: 10s;
    animation-delay: 2s;
}
.spin-clockwise-16 {
    animation-name: spin-clockwise;
    animation-duration: 16s;
    animation-delay: 4s;
}
.spin-clockwise-18 {
    animation-name: spin-clockwise;
    animation-duration: 18s;
}
.spin-counterclockwise-5 {
    animation-name: spin-counterclockwise;
    animation-duration: 5s;
    animation-delay: 5s;
}
.spin-counterclockwise-5-2 {
    animation-name: spin-counterclockwise;
    animation-duration: 5s;
    animation-delay: 1s;
}
.spin-counterclockwise-7 {
    animation-name: spin-counterclockwise;
    animation-duration: 7s;
    animation-delay: 3s;
}
.spin-counterclockwise-14 {
    animation-name: spin-counterclockwise;
    animation-duration: 14s;
    animation-delay: 1s;
}
@keyframes spin-clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes spin-counterclockwise {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}