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

@layer utilities {
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

[type="checkbox"]:checked {
    background-image: url("https://muhandisin.s3.eu-central-1.amazonaws.com/assets/check.svg");
}

[type="radio"]:checked {
    background-image: url("https://muhandisin.s3.eu-central-1.amazonaws.com/assets/circle.svg");
}

[data-complete="true"].checkbox-label {
    @apply text-blue-300;
}

[data-loading="true"] [data-type="submit"] .formkit-input::before,
.loading .formkit-input::before,
[loading="true"][type="submit"].formkit-input::before {
    content: " ";
    background-image: url("https://muhandisin.s3.eu-central-1.amazonaws.com/assets/spinner.svg");
    width: 20px;
    height: 20px;
    @apply animate-spin;
}

[loading="true"].formkit-input {
    cursor: progress;
}

[data-type="submit"] .formkit-input {
    @apply flex items-center justify-center gap-2;
}

[data-disabled="true"] {
    @apply opacity-50 cursor-not-allowed;
}

a {
    @apply text-blue-300;
}

hr {
    @apply border-blue-100;
}

.map .pac-target-input {
    @apply flex-1 w-full px-2.5 disabled:cursor-not-allowed h-10 bg-white border-2 focus:border-blue-300 border-blue-200 rounded-lg text-xs text-gray-300 placeholder-gray-200 focus:outline-transparent focus:ring-transparent transition-colors duration-300 ease-in-out min-w-0;
}

.form-small-button button[type="submit"] {
    @apply flex-initial px-5 py-2 text-sm font-medium;
}

.form-small-button .formkit-outer[data-type="submit"] {
    @apply flex-initial w-auto mb-0;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #dadee3 #f4f6f9;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: #f4f6f9;
}

*::-webkit-scrollbar-thumb {
    background-color: #dadee3;
    border-radius: 10px;
    border: 2px solid #f4f6f9;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

.multiselect.multiselect--disabled {
    @apply !cursor-not-allowed !opacity-50;
}
.multiselect-tags {
    @apply !pl-0;
}
.multiselect-placeholder {
    @apply !pl-4;
}
.multiselect-tag {
    @apply !bg-blue-300 !text-xs;
}

.multiselect-tag * {
    @apply !transition-all !duration-200 !ease-in-out;
}

.multiselect {
    @apply !border-2 !border-blue-200 !rounded-lg !min-h-[52px] !text-xs;
}

.multiselect.is-active {
    @apply !shadow-none !border-blue-300;
}
.multiselect.is-disabled {
    @apply !cursor-not-allowed;
}

.multiselect-tags-search {
    @apply flex-1 px-0 text-xs text-gray-300 placeholder-gray-200 border-none disabled:cursor-not-allowed focus:outline-transparent focus:ring-transparent focus:border-transparent;
}

.multiselect-option.is-selected {
    @apply !bg-blue-300;
}

.strikethrough {
    @apply relative;
}

.strikethrough:after {
    content: " ";
    @apply absolute left-0 right-0 top-1/2 translate-y-1/2 h-0.5 bg-blue-300;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

:root {
    --popper-theme-background-color: #ffffff;
    --popper-theme-background-color-hover: #ffffff;
    --popper-theme-text-color: #333333;
    --popper-theme-border-width: 1px;
    --popper-theme-border-style: solid;
    --popper-theme-border-color: #eeeeee;
    --popper-theme-border-radius: 6px;
    --popper-theme-padding: 10px 32px;
    --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
}

div.vac-card-window {
    --chat-border-style: 1px solid transparent !important;
}

.swiper-button-next,
.swiper-button-prev {
    @apply !absolute !z-50 !p-2 !m-2 !text-white !-translate-y-1/2 !bg-blue-300 !rounded-full !top-1/2 !w-auto !h-auto !opacity-80;
}

.swiper-button-next::after {
    content: url("https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/arrow-left-white.svg") !important;
}
.swiper-button-prev::after {
    content: url("https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/arrow-right-white.svg") !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    line-height: 0px !important;
}

.swiper-button-disabled {
    @apply !opacity-0;
}

div > input + .label-required {
    color: red !important;
    background-color: red !important;
}

table {
    max-width: 100%;
    overflow-x: auto;
}

.swiper-button-prev,
.swiper-button-next {
    @apply !hidden md:!flex;
}