@import "variable";

//carouseljs
@import "@yonchando/carouseljs/src/sass/carousel";

// icomoon-custom
@import "icomoon/style";

// animate.css
@import "animate.css/animate.css";

// owl carousel
@import "custom/_owl.carousel.min.css";

// Sweet alert
@import 'sweetalert2/src/sweetalert2.scss';

// boostrap
@import "./bootstrap/boostrap";

// Tailwind

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

@layer base {
    html {
        font-family: Proxima Nova, system-ui, sans-serif;
    }

    body {
        @apply tw-bg-white;
        color: #4F4F4F;
    }

    a {
        @apply tw-text-[#333333] tw-no-underline;
    }

    a:hover, a:active, a:visited, a:focus {
        @apply tw-text-[#333333] tw-no-underline;
    }
}

@layer components {
    .divider {
        @apply tw-border-0 tw-border-b tw-border-solid tw-border-gray-400/20;
    }

    .modal-popup {
        display: none;
    }

    .triangle-shape {
        &:before {
            @apply tw-content-[''] tw-z-20 tw-absolute tw-top-0 tw-left-0 tw-border-solid tw-border-0 tw-border-t-[70px] tw-border-t-red-500 tw-border-r-[70px] tw-border-r-transparent;
        }
    }

    .rectangle-shape {
        $rectangle-border-width: 40px;
        $rectangle-width: 185px;

        &:before {
            content: '';
            @apply tw-z-20 tw-absolute tw-border-solid tw-border-0 tw-border-b-[#{$rectangle-border-width}] tw-border-b-red-500
            tw-w-[#{$rectangle-width}] -tw-left-[42px] tw-top-[31px]
            tw-border-l-[#{$rectangle-border-width}] tw-border-l-transparent tw-border-r-[#{$rectangle-border-width}] tw-border-r-transparent -tw-rotate-45;
        }
    }

    .panel {
        @apply tw-bg-white tw-shadow;

        .panel-head, .panel-body, .panel-footer {
            @apply tw-px-6 tw-py-6;
        }
    }

    .btn-custom {
        @apply tw-rounded-l-full tw-rounded-r-full tw-px-8 tw-py-4 btn-outline-dark focus:tw-ring-0 focus-visible:tw-ring-0;

        &:active:focus {
            box-shadow: none;
        }

        &-rounded-full {
            @apply tw-rounded-full tw-border-0 tw-w-8 md:tw-w-10 tw-h-8 md:tw-h-10;
        }
    }

    .btn-dark {
        @apply tw-bg-dark tw-text-white;

        &:active:focus {
            box-shadow: none;
        }
    }

    .btn {
        &,&:focus {
            box-shadow: none;
        }
    }

    .btn-default {
        @apply tw-bg-white tw-text-dark;
    }

    .modal {
        @apply tw-bg-dark/50;
    }

    .tw-form-radio:checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    }

    .tw-rounded-x-full {
        @apply tw-rounded-r-full tw-rounded-l-full;
    }
}


.carousel-slider {
    .carousel-contents {
        pointer-events: none;

        .carousel-content-item {
            pointer-events: auto;
            user-select: none;
            -webkit-user-drag: none;
        }
    }
}

.content {
    h1 {
        font-size: 1.8rem;
        font-weight: bolder;
    }

    h2 {
        font-size: 1.5rem;
    }

    p {
        font-size: 0.9rem;
    }
}

.select2-container {
    z-index: 99999;
}

.irs--round .irs-bar {
    @apply tw-bg-dark;
}
.irs--round .irs-handle {
    @apply tw-bg-dark tw-border-0;

    &:hover,&.state_hover {
        @apply tw-bg-dark;
    }
}