/* SLASH HORROR — SPOTLIGHT HEARTS */

/* Keep the name's existing layout position. */
.sh-spotlight-name {
    display: block;
    position: relative;
    width: max-content;
    max-width: 100%;
}

/* Maintain the movie/TV credit column layout. */
.movie-credit-list > .sh-spotlight-name {
    align-self: flex-start;
}

/* Overlay the heart outside the name's text width. */
.sh-spotlight-heart {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    padding: 0 0 0 4px;
    margin: 0;

    background: transparent;
    border: 0;

    color: #aeb7c0;
    font-size: 12px;
    line-height: 1;

    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 3;

    transition:
        opacity .12s ease,
        color .12s ease;
}

/* Reveal the heart on hover or keyboard focus. */
.sh-spotlight-name:hover > .sh-spotlight-heart,
.sh-spotlight-name:focus-within > .sh-spotlight-heart {
    opacity: 1;
    pointer-events: auto;
}

/* Hover state. */
.sh-spotlight-heart:hover {
    color: #e65168;
}

/* Saved favorite: persistent red fill when revealed. */
.sh-spotlight-heart.is-favorite {
    color: #c62b45;
}

.sh-spotlight-heart:focus-visible {
    outline: 2px solid #c62b45;
    outline-offset: 1px;
}

.sh-spotlight-heart:disabled {
    cursor: wait;
}