.watch {
    @apply bg-slate-100;
    &.info {
        @apply container mx-auto p-6 text-body;
    }

    &-btn {
        @apply bg-secondary bg-opacity-100  hover:bg-opacity-50 cursor-pointer;
        @apply md:py-[2px] py-2 mx-1 px-2 font-semibold text-sm text-white;
        &a {
            @apply md:py-[2px] py-2;
        }


    }

    .elements {
        @apply grid grid-cols-1 md:grid-cols-2 w-full gap-x-5 gap-y-1 mt-3;

        .el {

            .name {
                @apply mr-2 font-semibold
            }
            .csv:not(:empty) ~ .csv:not(:empty):before {
                margin-right: 5px;
                content: ", ";
            }

            &.genres {
                @apply flex  gap-1 items-center;
            }
            .genre {
                @apply flex flex-wrap gap-1;


            }
        }

    }
    .details {
        @apply p-5 pt-0;
    }

    .tags {
        @apply w-full mx-auto mt-5 flex flex-wrap gap-2 text-xl;
        // a {
        //     @apply text-sm px-4 font-semibold;
        // }
    }

    .title {
        @apply text-2xl font-semibold mb-3;
    }

//     .play-wrap {
//         @apply inline-flex items-center h-20;
//         .play-content {
//             @apply relative h-[80px] aspect-square cursor-pointer;

//             .icon {
//                 @apply absolute h-full w-full flex items-center justify-center z-10;
//                 svg {
//                     @apply w-12 h-12 z-10 bg-primary text-white;
//                     stroke: #fff;
//                     fill: #fff;

//                     border-radius: 50%;
//                     box-shadow: 0 0 40px 5px #4f802b;
//                 }
//             }


//         .loader {
//             position: absolute;
//             width: 100%;
//             height: 100%;
//             top: 0;
//             left: 0;
//             &::before, &::after {
//               opacity: 0;
//               box-sizing: border-box;
//               content: "\0020";
//               position: absolute;
//               top: 0;
//               left: 0;
//               width: 100%;
//               height: 100%;
//               border-radius: 100px;
//               border: 3px solid #79C142;
//               box-shadow: 0 0 50px #4f802b, inset 0 0 50px #4f802b;
//             }
//             &::after {
//               z-index: 1;
//               animation: playloader 2s infinite 1s;
//             }
//             &::before {
//               z-index: 2;
//               animation: playloader 2s infinite;
//             }
//           }
//     }


// }

//     @keyframes playloader{
//         0%{ transform: scale(0); opacity: 0; }
//         50%{ opacity: 1; }
//         100%{ transform: scale(1); opacity: 0; }
//     }
}

.seasons-list {
    @apply container p-5 mt-5 bg-slate-100;
    .seasons-wrapper{
        > span {
            @apply text-lg
        }
    }
    .seasons {
        @apply flex gap-2 flex-wrap mt-3;
        a {
            @apply bg-secondary px-2 py-1 hover:bg-opacity-50 hover:text-body text-white;
            &.active {
                @apply bg-opacity-50 font-medium text-body;
            }
        }

    }
    .episodes-wrapper{
        @apply mt-5;
        > span {
            @apply text-lg
        }
    }
    .episodes {
        @apply flex gap-2 flex-wrap mt-3 text-white;
        span {
            @apply bg-secondary px-2 py-1 hover:bg-opacity-50 cursor-pointer hover:text-body;
            &.active {
                @apply bg-opacity-50 font-medium cursor-default;
            }
        }

    }

}