.html-preview {
    @apply flex flex-col items-center h-full;

    &__wrap {
        @apply flex justify-center mb-5;
    }

    &__btn {
        @apply p-1 rounded;

        &.active {
            @apply bg-blue-50 text-blue-600;
        }
    }

    &__btn-icon {
        @apply w-10 h-6 fill-current;
    }
}

.device-desktop {
    @apply w-full h-full border rounded-md;
}

.device-desktop > div {
    @apply w-full h-full rounded-md bg-white;
}

.device-tablet {
    transition-property: width!important;
    width: auto;
    @apply justify-center border-2 rounded-3xl px-5 ease-in duration-150;
}

.device-tablet::after {
    @apply border border-style bg-gray-100 dark:bg-gray-900 rounded-full block w-12 h-12 my-4;
    content: "";
}

.device-tablet::before {
    @apply border border-style bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
    content: "";
}

.device-tablet > div {
    height: 1004px;
    width: 768px;
}

.device-mobile {
    @apply justify-center border-2 rounded-3xl px-3;
}

.device-mobile::before {
    @apply border border-style bg-gray-100 dark:bg-gray-900 rounded-full block w-3 h-3 my-2;
    content: "";
}

.device-mobile::after {
    @apply border border-style bg-gray-100 dark:bg-gray-900 rounded-full block w-8 h-8 my-3;
    content: "";
}

.device-mobile > div {
    height: 568px;
    width: 320px;
}

.device-desktop,
.device-tablet,
.device-mobile {
    @apply flex flex-col items-center bg-gray-50 dark:bg-gray-900;
}

.device-desktop > div {
    transition-property: width !important;
    @apply ease-in duration-150;
}

.device-tablet > div,
.device-mobile > div {
    transition-property: width !important;
    @apply border rounded-md bg-white ease-in duration-150;
}

.device-desktop iframe,
.device-tablet iframe,
.device-mobile iframe {
    transition-property: width !important;
    /*@apply ease-in duration-300;*/
    @apply rounded-md w-full h-full;
}
