/**
 * Arrow Container — reusable CTA button with arrow icon
 *
 * BEM: .arrow-container, .arrow-container__text, .arrow-container__icon
 * Used by: discover-manga cards, content-carousel "View More", spotlight, coming-soon, etc.
 */

.arrow-container {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--color-black);
    text-decoration: none;
    overflow: hidden;
    flex-shrink: 0;
}

.arrow-container__text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0.25rem 0.75rem;
    font-family: "Maax Medium";
    font-weight: 400;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--color-black);
    background: var(--color-white);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.arrow-container__icon {
    display: flex;
    align-items: center;
    width: 28px;
    background: var(--color-white);
    overflow: hidden;
    border-left: 2px solid var(--color-black);
    transition: background-color 0.2s ease;
}

.arrow-container__icon svg {
    width: 100%;
    height: auto;
    fill: none;
    stroke: var(--color-black);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.2s ease;
}

@keyframes arrow-slide-in {
    0% { transform: translateX(-40px); }
    100% { transform: translateX(0); }
}

.arrow-container:hover .arrow-container__text {
    background: var(--color-black);
    color: var(--color-white);
}

.arrow-container:hover .arrow-container__icon {
    background: var(--color-black);
}

.arrow-container:hover .arrow-container__icon svg {
    stroke: var(--color-white);
    animation: arrow-slide-in 300ms ease;
}