@use "../../../../../styles/abstracts/variables" as *;

.watchitem {
    background: linear-gradient(
    to bottom right,
    rgba(255, 140, 0, 0.04),  // warm orange tint
    rgba(255, 255, 255, 0.02)
    );
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    flex: 0 0 300px;
    align-items: center;
    padding: 1.2rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;

    @media only screen and (max-width: 1000px) {
        // flex: 0;
        flex: 0 0 260px;
        align-items: center;
        padding: .8rem .8rem;
    }

    &__left {
        display: flex;
        gap: 10px;
        align-items: center;

        img {
            width: 35px;
            height: 35px;
        }
        @media only screen and (max-width: 1000px){
            gap: 15px;
            img {
                width: 35px;
                height: 35px;
            }
        }

        h3{
            font-weight: 500;
            font-size: .9rem;
            color: $col-white;
            @media only screen and (max-width: 1000px){
                font-size: .85rem;
            }
        }
        p{
            font-size: .75rem;
            color: $col-white;
            font-weight: 500;
            opacity: .9;
            @media only screen and (max-width: 1000px){
                font-size: .75rem;
            }
        }
    }

    &__right {
        h4{
            font-weight: 500;
            font-size: .8rem;
            color: $col-white;
            @media only screen and (max-width: 1000px){
                font-size: .85rem;
            }
        }
        p{
            text-align: right;
            font-size: .8rem;
            color: $col-white;
            font-weight: 500;
            opacity: .9;
            @media only screen and (max-width: 1000px){
                font-size: .8rem;
            }
        }
    }
}