@utility container-base {
    @apply w-full mx-auto px-4;
}

@utility container-md {
    @apply container-base xl:max-w-[72.5rem];
}

@utility container-lg {
    @apply container-base xl:max-w-[83.5rem];
}

@utility container-xl {
    @apply container-base xl:max-w-[95.25rem];
    @apply max-sm:px-0;
}

@utility modal-base {
    @apply fixed w-full h-[80dvh] mx-auto px-4 py-4;
    @apply left-1/2 -translate-x-1/2 top-[10dvh];
}

@utility modal-md {
    @apply modal-base xl:max-w-[60rem] xl:max-h-[30rem];
}

@utility modal-md-square {
    @apply modal-base xl:max-w-[60rem] xl:max-h-[60rem];
}

@utility btn-base {
    @apply flex flex-row gap-x-2 items-center justify-center;
    @apply rounded-sm;
    @apply transition-colors;
    @apply py-1 px-4;
    @apply cursor-pointer;
}

@utility btn-primary {
    @apply btn-base bg-primary text-primary-fg-1 hover:bg-primary-dark;
}

@utility btn-danger {
    @apply btn-base bg-red-500 text-primary-fg-1 hover:bg-red-800;
}

@utility btn-disabled {
    @apply btn-base bg-disabled text-disabled-fg pointer-events-none;
}

@utility icon-base {
    @apply leading-none;

    svg {
        @apply fill-current h-[1em] w-auto;
    }

    .icon-image {
        @apply bg-current h-[1em] w-auto mask-no-repeat mask-contain mask-center aspect-square;
    }
}

@utility icon-medium {
    @apply icon-base text-[1.2em];
}

@utility icon-large {
    @apply icon-base text-[1.7em];
}

@utility icon-small {
    @apply icon-base text-[1em];
}

@utility icon-smaller {
    @apply icon-base text-[0.75em];
}

@utility product-description {
    h1 {
        @apply text-h1;
    }

    h2 {
        @apply text-h2;
    }

    h3 {
        @apply text-h3;
    }

    h4 {
        @apply text-body-s;
    }

    h5 {
        @apply text-detail;
    }

    h6 {
        @apply text-detail;
    }

    a {
        @apply text-blue-600;
    }

    [data-size="product-inline"] a {
        @apply text-fg;
    }

    ul {
        @apply list-[revert] ps-10;
    }

    ol {
        @apply list-[revert] ps-10;
    }

    .wp-block-gallery {
        @apply flex flex-row gap-x-6;
    }

    .wp-block-image {
        @apply w-full rounded-2xl overflow-hidden;
        
        &.aligncenter img {
            @apply place-self-center;
        }

        &.alignleft img {
            @apply place-self-end;
        }
    }
}

@utility swiper-slide {
    height: unset !important;
}

@utility swiper-wrapper {
    height: fit-content !important;
}

@utility scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}