.mazino-image-scroll-block {
    position: relative;
    overflow: hidden;
}

.mazino-image-scroll-container {
    display: flex;
    will-change: transform;
}

.mazino-image-scroll-container[data-direction="left"],
.mazino-image-scroll-container[data-direction="right"] {
    white-space: nowrap;
}

.mazino-image-scroll-container[data-direction="up"],
.mazino-image-scroll-container[data-direction="down"] {
    display: block;
}

/* Simplified shared animations using CSS custom properties */
.mazino-image-scroll-container[data-direction="left"] {
    animation: scroll-horizontal var(--speed, 20s) linear infinite;
    --scroll-start: 0;
    --scroll-end: calc(-1 * var(--content-width, 50%));
}

.mazino-image-scroll-container[data-direction="right"] {
    animation: scroll-horizontal var(--speed, 20s) linear infinite;
    --scroll-start: calc(-1 * var(--content-width, 50%));
    --scroll-end: 0;
}

.mazino-image-scroll-container[data-direction="up"] {
    animation: scroll-vertical var(--speed, 20s) linear infinite;
    --scroll-start: 0;
    --scroll-end: calc(-1 * var(--content-height, 50%));
}

.mazino-image-scroll-container[data-direction="down"] {
    animation: scroll-vertical var(--speed, 20s) linear infinite;
    --scroll-start: calc(-1 * var(--content-height, 50%));
    --scroll-end: 0;
}

/* Shared keyframes for all instances */
@keyframes scroll-horizontal {
    0% { transform: translateX(var(--scroll-start)); }
    100% { transform: translateX(var(--scroll-end)); }
}

@keyframes scroll-vertical {
    0% { transform: translateY(var(--scroll-start)); }
    100% { transform: translateY(var(--scroll-end)); }
}

/* Fade Effects */
.mazino-image-scroll-block[data-direction="left"]::before,
.mazino-image-scroll-block[data-direction="right"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to right, var(--fade-color, transparent), transparent);
    z-index: 1;
}

.mazino-image-scroll-block[data-direction="left"]::after,
.mazino-image-scroll-block[data-direction="right"]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, var(--fade-color, transparent), transparent);
    z-index: 1;
}

.mazino-image-scroll-block[data-direction="up"]::before,
.mazino-image-scroll-block[data-direction="down"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, var(--fade-color, transparent), transparent);
    z-index: 1;
}

.mazino-image-scroll-block[data-direction="up"]::after,
.mazino-image-scroll-block[data-direction="down"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to top, var(--fade-color, transparent), transparent);
    z-index: 1;
}

.mazino-image-scroll-container img {
    display: block;
    object-fit: contain;
}

/* Error handling for broken images */
.mazino-image-scroll-container img.error {
    display: none;
}

.mazino-image-scroll-container img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}

/* Editor-specific styles */
.block-editor .mazino-image-scroll-block {
    overflow: hidden;
}

.block-editor .mazino-image-scroll-container {
    animation-play-state: running;
}

/* Edit Images button */
.block-editor .mazino-image-scroll-edit-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background-color: #f0f0f0;
    color: #333;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.block-editor .mazino-image-scroll-edit-button:hover {
    background-color: #e0e0e0;
}