.add-analyze-field:focus-within {
    @apply ring-2 ring-c-blue
}

.account-videos-selector > div {
    @apply h-[52px] p-0
}
.account-videos-selector > hr {
    @apply hidden
}

.analyze-textarea-keyword {
    @apply 
    h-10 px-4 
    inline-flex items-center gap-x-1.5 
    rounded-full bg-c-blue 
    font-medium text-sm text-c-white
}

.analyzed-video-container {
    width: calc((100% - (16px * 3)) / 4);
}
.analyzed-video.played .start-video-btn {
    @apply w-0 h-0
}
.analyzed-video.played .video-info {
    @apply hidden
}

.video-reels {
    aspect-ratio: 9 / 16;
}

.analyzed-account {
    width: calc((100% - (16px * 2)) / 3);
}

.vid-info-pop-up {
    @apply w-0 h-0 relative bg-transparent overflow-hidden;
}
.vid-info-pop-up > section {
    @apply scale-0;
}

.vid-info-pop-up.opened {
    @apply w-screen min-h-screen lg:px-[52px] md:py-4 md:px-[28px] py-[84px] px-4 fixed bg-[#23232366] overflow-auto;
}
.vid-info-pop-up.opened > section {
    @apply scale-100;
}

.vid-info-section {
    @apply rounded-c-radius overflow-hidden
}
.vid-info-title {
    @apply py-4 px-[28px] bg-c-blue-50 font-semibold text-sm;
}
.vid-info-container {
    @apply py-4 px-[28px] border rounded-b-c-radius rounded-t-none border-t-0 border-c-blue-100
}

.vid-info-circle-bar {
    transform-origin: 50% 50%;
    transition: 1s;
    stroke-linecap: round; 
}

.vid-info-grid-container {
    @apply flex flex-col gap-4;
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.five { grid-area: five; }

* + .no-accounts-message {
    @apply !hidden
}


@media screen(md) {
    .vid-info-grid-container {
        @apply grid grid-cols-[calc(50%-0.5rem)_calc(50%-0.5rem)] grid-rows-[auto] items-stretch;
        grid-template-areas:
            "two two"
            "one five"
            "three three"
            "four four"
        ;
    }
}


@media screen(lg) {
    .vid-info-grid-container {
        @apply grid grid-cols-[30%_calc(40%-1rem)_calc(30%-1rem)] grid-rows-[auto_auto_auto] items-start;
        grid-template-areas:
            "one two two"
            "one four five"
            "three four five"
            "three four five"
        ;
    }
}


@media (max-width: 1280px) {   
    .analyzed-account {
        width: calc((100% - 16px) / 2);
    }
}


@media (max-width: 1024px) {   
    .analyzed-account {
        width: calc((100% - (16px * 2)) / 3);
    }
}


@media (max-width: 850px) {   
    .analyzed-video-container {
        width: calc((100% - 16px) / 2);
    }

    .analyzed-account {
        width: calc((100% - 16px) / 2);
    }
}


@media (max-width: 640px) {   
    .analyzed-video-container {
        width: calc((100% - 16px) / 2);
    }

    .analyzed-account {
        width: 100%;
    }
}


@media (max-width: 500px) {   
    .analyzed-video-container {
        width: 100%;
    }
}