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

@layer components {}

@import 'fonts.scss';

html {
    // @apply text-[15px]
}

body {
    @apply select-none min-w-80 font-sans;

    &.modal-opened {
        @apply overflow-hidden;
    }
}

.container {
    @apply max-w-7xl mx-auto px-4 grid grid-cols-12 items-center;

    &.min-w-full {
        @apply px-0;
    }
}

.header {
    @apply p-2 bg-slate-200;

    .container {
        @apply items-center;
    }
}

.logo {
    @apply w-full py-4 col-span-8 xl:col-span-2;

    a {
        @apply flex items-center gap-2;
    }

    &_text {
        @apply leading-6 text-3xl font-normal;
    }

    svg {
        @apply text-ioprim inline-block m-0 w-10 h-10 min-w-10;
    }
}

.menu {
    @apply hidden xl:flex col-span-10 justify-end;

    a {
        @apply text-zinc-800 hover:text-ioprim-900 transition-colors;

        &:before {
            content: '';
            @apply inline-block w-[2px] h-5 mx-4 align-middle bg-gradient-to-t from-transparent via-zinc-800 via-50% to-transparent;
        }

        &:first-child::before {
            content: none;
        }
    }

    a[href^=http] {
        @apply relative;

        &:after {
            content: '↷';
            @apply ml-2;
        }
    }

    &.toggle_visible {
        @apply max-xl:flex max-xl:flex-col max-xl:text-left;

        a {
            @apply max-xl:mb-2;
        }

        a:before {
            @media screen and (max-width: 1280px) {
                content: none;
            }
        }
    }

    &-toggle {
        @apply flex xl:hidden col-span-4 justify-end;

        >span {
            @apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors;

            svg {
                @apply text-3xl;
            }
        }
    }
}

a[href^="#"] {
    @apply underline decoration-dotted underline-offset-4 decoration-neutral-500;
}

.footer {
    @apply px-2 py-4 bg-slate-200 text-zinc-800 pt-12;

    .container {
        @apply gap-4
    }

    .k-logo {
        @apply col-span-12 xl:col-span-2 row-span-3 text-9xl text-ioprim;

        svg {
            @apply my-0 mx-auto;
        }

        &:after {
            content: '';
            @apply block lg:hidden mr-auto ml-auto mt-5 h-[2px] max-w-44 mx-4 align-middle bg-gradient-to-r from-transparent via-zinc-800 via-50% to-transparent;

        }
    }

    &-text {
        @apply col-span-12 xl:col-span-5 text-sm mb-2;

        &-small {
            @apply col-span-12 xl:col-span-10 text-xs min-w-full;
        }

        &-social {
            @apply col-span-12 xl:col-span-10 flex gap-4 flex-wrap justify-center;
        }
    }

    &-icon {
        @apply order-2 flex justify-center items-center gap-2;

        &:hover {
            .footer-icon-text {
                @apply no-underline;
            }
        }

        svg {
            @apply mb-0;
        }

        &-big {
            @apply text-3xl order-1 w-full text-center;

            .footer-icon-text {
                @apply no-underline;
            }
        }

        &-text {
            @apply underline;
        }
    }

    &_two {
        @apply xl:bg-slate-200 py-16 lg:py-8 text-sm text-zinc-500;
    }
}

.siteblock {
    @apply py-10;

    &_imgbg {
        @apply relative py-0 bg-no-repeat bg-[auto_100%] bg-center h-[50vh] min-h-[300px] bg-transparent overflow-hidden;
        img {
            @apply absolute top-0 right-0 bottom-0 left-0 blur-lg w-full -z-10 scale-110;
        }
    }

    &_calc {
        // @apply;

        .container {
            @apply gap-4 items-stretch;

            >* {
                @apply relative;
            }

            >div:first-child {
                @apply min-h-[600px];
            }
        }
    }

    &_content {
        >.container {
            @apply items-start;
        }

        a[href^="tel://"] {
            @apply whitespace-nowrap
        }
    }

    &-content {
        @apply col-span-full xl:col-span-8 h-full flex flex-col justify-between min-w-full prose;
    }

    &-text {
        // @apply 
    }

    &-title {
        @apply col-span-full text-4xl xl:text-6xl font-black font-h1 xl:leading-[0.85] tracking-tight mb-[3.15rem]
    }

    &-image {
        @apply col-span-full xl:col-span-4 flex justify-center items-center;
    }
}

.review {
    @apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4;

    &-image {
        @apply max-w-full max-h-full aspect-square overflow-hidden col-span-1 pr-4;

        img {
            @apply rounded-full bg-slate-300
        }
    }

    &-content {
        @apply col-span-3 text-end italic text-sm lg:text-base;
    }

    &-title {
        @apply col-span-4 font-bold text-lg text-end xl:mt-4 mb-4 xl:mb-0;
    }
}

.modal {
    @apply relative bg-white p-5 lg:p-10 border rounded shadow prose;

    &-backdrop {
        @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center z-30;
    }

    &-close {
        @apply absolute right-3 top-3 text-4xl opacity-50 cursor-pointer;
    }

    &-status {
        @apply text-center;

        &-icon {
            @apply text-8xl;
        }

        &-text {
            @apply text-3xl;
        }
    }

    &-content {
        @apply max-h-[66vh] overflow-auto;
    }

    h2 {
        @apply px-6 text-2xl text-center;
    }

    form {
        @apply flex flex-col gap-4 items-center;
    }
}

label {
    @apply inline-block text-sm font-medium text-gray-900 min-w-36;
}

input {
    @apply bg-white border border-gray-300 text-gray-900 text-lg p-2.5 rounded focus:ring-blue-500 focus:border-blue-500 focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:text-black
}

input[type=checkbox] {
    @apply w-4 h-4;
}

input[type=range] {
    @apply w-full bg-transparent border-transparent cursor-pointer appearance-none disabled:opacity-50 disabled:pointer-events-none focus:outline-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5 [&::-webkit-slider-thumb]:-mt-0.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_#111] [&::-webkit-slider-thumb]:shadow-slate-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:ease-in-out [&::-webkit-slider-thumb]:dark:bg-neutral-700 [&::-moz-range-thumb]:w-2.5 [&::-moz-range-thumb]:h-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-4 [&::-moz-range-thumb]:border-blue-600 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:ease-in-out [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:bg-gray-100 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:dark:bg-neutral-700 [&::-moz-range-track]:w-full [&::-moz-range-track]:h-2 [&::-moz-range-track]:bg-gray-100 [&::-moz-range-track]:rounded-full;
}

textarea {
    @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 max-w-full min-h-10 max-h-40;
}

button {
    @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-5 lg:leading-4;

    &.neutral,
    &[type="reset"] {
        @apply bg-neutral-200 hover:bg-neutral-400
    }
}

.form {
    @apply col-span-full h-full flex flex-col gap-4 justify-between;

    &-group {
        @apply rounded flex flex-col gap-4 p-4 shadow shadow-slate-400;
    }

    &-row {
        @apply flex flex-row flex-wrap gap-2;

        &_picker {
            @apply grid grid-cols-2 justify-center items-center;
        }
    }

    &-item {
        @apply flex flex-row items-center justify-start flex-wrap;

        label {
            @apply w-full;
        }

        .icon {
            @apply hover:text-primary cursor-pointer transition-colors text-xl;

            &.disabled {
                @apply text-neutral pointer-events-none cursor-not-allowed;
            }
        }

        &_total {
            @apply w-full flex-nowrap;

            input {
                @apply w-20 bg-slate-100;
            }
        }

        &_checkbox {
            @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap gap-2 items-center;

            label {
                @apply leading-none;
            }

            svg {
                @apply text-slate-500;
            }
        }

        &_range {
            @apply w-full;

            >div {
                @apply flex flex-nowrap w-full gap-2 items-center;

                input {
                    @apply flex-grow;
                }

                span {
                    @apply min-w-16;
                }
            }
        }

        &_picker {
            @apply w-full;

            svg {
                @apply text-slate-500;
            }
        }
    }
}

.picker {
    @apply leading-none w-full row-start-2;

    &_open {
        @apply flex-wrap;
    }

    &_disabled {
        @apply pointer-events-none opacity-50;
    }

    &-input {
        @apply flex items-center justify-between;

        >div {
            @apply min-h-12 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center p-2;

            span {
                @apply grow text-left max-w-[80%] break-words line-clamp-2;
            }
        }

    }

    &-button {
        @apply min-w-6 shrink-0 h-full;
    }

    &-selected {
        @apply h-10 overflow-hidden rounded border-gray-300 shadow inline-block leading-none grow;
    }

    &-changer {
        @apply gap-3 mt-4 max-h-36 overflow-auto order-10 hidden;

        &_open {
            @apply flex flex-wrap col-span-2;
        }
    }

    &-list {
        @apply flex gap-4 w-full;
    }

    &-item {
        @apply size-10;

        &--empty {
            @apply block bg-slate-300;
        }
    }

}

.feature {
    @apply col-span-full flex gap-10 mt-4 justify-center xl:justify-between flex-wrap items-center;

    &-item {
        @apply rounded bg-neutral-200 p-4 min-w-36 flex justify-center flex-wrap flex-col;
    }

    &-name {
        @apply text-ioprim font-bold w-20 text-xl leading-4 col-span-2;
    }
}

.fallback {
    @apply absolute bg-neutral-600 top-0 left-0 w-full h-full z-20 flex justify-center items-center text-black font-mono
}

.canvas-icons {
    @apply absolute text-3xl flex flex-col;

    a {
        @apply cursor-pointer;

        &.disabled {
            @apply cursor-not-allowed opacity-50 pointer-events-none;
        }
    }
}

.calc {
    @apply max-h-[800px] relative h-full;
}

.calc_table {
    @apply flex flex-col gap-2 self-end;

    >.grid {
        @apply gap-2 items-end;

        >[class*=col] {
            @apply p-1 border-solid border-b;
        }

        >.col-span-4:not(.calc_table-maincell) {
            @apply pl-4;
        }
    }
}