/**
 * Public-facing styles for the WP Marquee plugin
 */

/* Base marquee container */
.wp-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 15px 0;
    background-color: #f8f8f8;
    border: 1px solid #eee;
    margin: 15px 0;
}

/* Marquee content container */
.wp-marquee-content {
    display: inline-block;
    white-space: nowrap;
    padding: 0 20px;
}

/* Horizontal scrolling (left/right) */
.wp-marquee-left .wp-marquee-content,
.wp-marquee-right .wp-marquee-content {
    animation-name: marquee-horizontal;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Vertical scrolling (top/bottom) */
.wp-marquee-top,
.wp-marquee-bottom {
    height: 200px; /* Default height for vertical marquees */
}

.wp-marquee-top .wp-marquee-content,
.wp-marquee-bottom .wp-marquee-content {
    animation-name: marquee-vertical;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    white-space: normal;
    width: 100%;
    text-align: center;
}

/* Direction-specific settings */
.wp-marquee-left .wp-marquee-content {
    animation-direction: normal;
}

.wp-marquee-right .wp-marquee-content {
    animation-direction: reverse;
}

.wp-marquee-top .wp-marquee-content {
    animation-direction: normal;
}

.wp-marquee-bottom .wp-marquee-content {
    animation-direction: reverse;
}

/* Error message styling */
.wp-marquee-error {
    color: #d63638;
    padding: 10px;
    border: 1px solid #ffb8bb;
    background-color: #ffebec;
    border-radius: 3px;
}

/* Keyframes for horizontal marquee */
@keyframes marquee-horizontal {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Keyframes for vertical marquee */
@keyframes marquee-vertical {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}