@use "sass:math";
@use "../../dev" as *;
@use "../../variables" as *;

// ============================================================================
// Base Mixins
// ============================================================================

// Wrapper
@mixin ticker--base {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    z-index: z("ribbon");

    // Style
    background-color: var(--color_text_primary);
    color: var(--color_fill_primary);
    border-color: var(--color_fill_primary);
    border-style: solid;
}

///
/// Inverted Ticker Style
/// ---------------------------------------------------------------------------
///
/// This style is used for the inverted color scheme of the ticker.
///
@mixin ticker--inverted {
    // Inverted Ribbon Style
    background-color: var(--color_fill_primary);
    color: var(--color_text_primary);
    border-color: var(--color_text_primary);
    // border-style: solid;
}

// Track Animation
@mixin ticker--track-horizontal($direction: left, $duration: 20s) {
    display: inline-flex;
    gap: q(12);
    white-space: nowrap;
    will-change: transform;
    animation: ticker-horizontal-#{$direction} $duration linear infinite;
}

@mixin ticker--track-vertical($direction: up, $duration: 20s) {
    display: flex;
    flex-direction: column;
    gap: q(4);
    will-change: transform;
    animation: ticker-vertical-#{$direction} $duration linear infinite;
}

// Optional duplicated content for seamless loop
@mixin ticker--loop {
    &::after {
        content: attr(data-text);
        display: inline-block;
        padding-left: q(40);
    }
}

// ============================================================================
// Keyframes
// ============================================================================

@keyframes ticker-horizontal-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes ticker-horizontal-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes ticker-vertical-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes ticker-vertical-down {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

// ============================================================================
// Component Usage
// ============================================================================

// Ticker container
@mixin ticker--horizontal {
    @include ticker--base;
    height: q(20);
    line-height: q(20);
    font-size: q(8);
    overflow: hidden;

    .ticker__track {
        display: inline-block;
        white-space: nowrap;
        animation: ticker-horizontal-left 20s linear infinite;
    }

    &:hover .ticker__track {
        animation-play-state: paused;
    }
}

@mixin ticker--vertical {
    @include ticker--base;
    height: q(100);

    .ticker__track {
        @include ticker--track-vertical(up);
    }

    &--reverse .ticker__track {
        @include ticker--track-vertical(down);
    }
}

@mixin ticker--horizontal--top {
    @include ticker--horizontal;
    // border-bottom: q(1) solid var(--color_text_primary);
    border-bottom-width: q(1);
}

@mixin ticker--horizontal--bottom {
    @include ticker--horizontal;
    // border-top: q(1) solid var(--color_text_primary);
    border-top-width: q(1);
}

@mixin ticker--vertical--left {
    @include ticker--vertical;
    // border-right: q(1) solid var(--color_text_primary);
    border-right-width: q(1);
}

@mixin ticker--vertical--right {
    @include ticker--vertical;
    // border-left: q(1) solid var(--color_text_primary);
    border-left-width: q(1);
}