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

@layer components {}

@import 'fonts.scss';

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

body {
    @apply select-none min-w-80;
}

.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;

    a:not([target="_blank"]) {
        @apply hidden xl:inline-block
    }
}

.logo {
    @apply text-ioprim font-bold w-20 text-2xl leading-4 py-4 col-span-4 xl:col-span-2;
}

.menu {
    @apply col-span-8 flex justify-between;

    a {
        @apply underline decoration-0 underline-offset-4 decoration-dotted hover:decoration-transparent transition-all;
    }

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

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

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

.footer {
    @apply px-2 py-4 bg-slate-200;

    .container {
        @apply gap-4
    }

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

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

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

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

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

.siteblock {
    @apply py-10;

    &_imgbg {
        @apply py-0 bg-no-repeat bg-cover bg-bottom h-[50vh] min-h-[600px];
    }

    &_calc {
        @apply py-0;

        &-canvas {
            @apply relative h-[50vh] min-h-[600px];
        }
    }

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

    &-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 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 rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
    }

    &-content {
        @apply col-span-3 text-end italic;
    }

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

.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-4 top-4 text-4xl opacity-50;
    }

    &-status {
        @apply text-center;
        &-icon {
            @apply text-8xl;
        }
        &-text {
            @apply text-3xl;
        }
    }

    h2 {
        @apply px-4;
    }

    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-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed;
}

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 grid grid-cols-12 gap-4;

    &-row {
        @apply col-span-full flex flex-row flex-wrap gap-4;
    }

    &-item {
        @apply flex flex-row gap-4 items-center justify-center flex-wrap xl:flex-nowrap;

        label {
            @apply w-full xl:w-auto;
        }

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

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

        &_checkbox {
            @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap
        }
    }
}

.color_picker {
    @apply leading-none;

    &-selected {
        @apply size-10 rounded border-gray-300 shadow inline-block leading-none;

        &__active {
            @apply outline outline-2 outline-offset-2 outline-primary;
        }
    }

    &-changer {
        @apply absolute w-80 z-10 p-4 border rounded bg-white flex gap-0 right-0 lg:right-auto;
    }
}

.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 top-0 left-0 flex flex-col;

    a {
        @apply cursor-pointer;

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