@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos globales */
html {
    scroll-behavior: smooth;
}

body {
    @apply bg-[#101116] text-slate-100;
}

/* Chapter Images Container */
div#chapter_images_container.active img {
    @apply rounded-lg shadow-md;
}

/* width */
div#chapters-list::-webkit-scrollbar {
    @apply w-2.5 bg-transparent
}
 
/* Handle */
div#chapters-list::-webkit-scrollbar-thumb {
    @apply bg-gray-600 rounded-md
}
 
/* Handle on hover */
div#chapters-list::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-300
}

/* Alpine JS */
[x-cloak],
.custom-cloak { 
  display: none !important; 
}

/* Estilos para detail */
.layer_main {
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: -2.5rem;
    width: calc(100% + 2.5rem);
    height: 960px;
}

.layer_2 {
    height: 960px;
    background: var(--layer, rgba(0, 0, 0, 0.6));
}

.layer_1 {
    background: linear-gradient(rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.4) 50%, rgb(16, 17, 22) 100%);
    -webkit-backdrop-filter: blur(36px);
    backdrop-filter: blur(36px);
}

/* Estilos para el carrusel */
.embla {
    overflow: hidden;
    position: relative;
}

.embla__viewport {
    overflow: hidden;
    width: 100%;
}

.embla__container {
    display: flex;
}

.embla__slide {
    flex: 0 0 33.3333%;
    min-width: 0;
    padding: 0 10px;
}

.embla__prev,
.embla__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

.embla__prev {
    left: 10px;
}

.embla__next {
    right: 10px;
}