@use "./scss/components";
@use "./scss/root";
@use "./scss/customer";
@use "./scss/branch";

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

@layer components {
  @import "../../../libs/ui/buttons/src/buttons.scss";
  @import "../../../libs/ui/bullet-list/src/bullet-list.scss";
  @import "../../../libs/ui/carousel/src/lib/_carousel.scss";
  @import "../../../libs/ui/datepicker/src/datepicker.scss";
  @import "../../../libs/ui/dialog/src/dialog.scss";
  @import "../../../libs/ui/input-controls/src/input-controls.scss";
  @import "../../../libs/ui/menu/src/menu.scss";
  @import "../../../libs/ui/progress-bar/src/lib/progress-bar.scss";
  @import "../../../libs/ui/search-bar/src/search-bar.scss";
  @import "../../../libs/ui/skeleton-loader/src/skeleton-loader.scss";
  @import "../../../libs/ui/tooltip/src/tooltip.scss";
  @import "../../../libs/ui/label/src/label.scss";
  @import "../../../libs/ui/notice/src/notice.scss";
  @import "../../../libs/ui/switch/src/switch.scss";

  .input-control {
    @apply rounded border border-solid border-[#AEB7C1] px-4 py-[1.125rem] outline-none;
  }

  .input-control.ng-touched.ng-invalid {
    @apply border-brand;
  }

  @keyframes load {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }

  .skeleton {
    @apply block bg-gray-300 h-6;
    animation: load 1s ease-in-out infinite;
  }
}

@layer base {
  body {
    @apply bg-background;
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }

  .desktop .scroll-bar::-webkit-scrollbar {
    @apply w-3;
    background-color: transparent;
  }

  .desktop .scroll-bar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: white;
  }

  .desktop .scroll-bar::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: var(--scrollbar-color);
  }
}
