@import "tailwindcss";

@plugin "@tailwindcss/typography";
@config "./tailwind.config.js";
@import "./theme.css";

@import 'inter-ui/inter';
@import 'inter-ui/inter-variable.css';

@source "../../core/components/tailwindhelper/elements/purge";
@source inline("before:content-['0']");
@source inline("xl:col-span-{6,7,8,9,10,11,12}");

@import 'photoswipe/dist/photoswipe.css';

@import "./css/content.css";
@import "./css/scroll.css";
@import "./css/ya-search.css";
@import "./css/timeline.css";
@import "./css/gallery.css";
@import "./css/product.css";
@import "./css/filter.css";
@import "./css/brands.css";
@import "./css/systems.css";
@import "./css/solutions.css";
@import "./css/modals.css";

@utility container {
    @apply relative mx-auto 3xl:!max-w-[110rem]
}

@view-transition {
    navigation: auto;
}

html {
    @apply bg-grey-light text-dark-1
}

a, svg {
    @apply transition-all duration-300
}

input {
    @apply caret-orange
}

button {
    @apply cursor-pointer transition-colors whitespace-nowrap cursor-pointer shrink-0 select-none
}

[x-cloak] {
    @apply hidden!
}


.pswp {
    --pswp-placeholder-bg: #e3e3e3;
}

.pswp--custom-bg .pswp__img {
    backgroung-color: #e3e3e3 !important;
}


.pswp--custom-bg .pswp__bg {
    background-color: color-mix(in oklab, #e3e3e3 90%, transparent);
    padding: 32px;
}

.pswp--custom-bg .pswp__button.pswp__button--close {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    top: 32px;
    right: 32px;
    color: #efefef;
}

.pswp--custom-bg .pswp__button.pswp__button--close:hover svg {
    color: #d6d6d6;
}