@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {
  body {
    @apply h-full overflow-x-hidden dark:text-slate-300 text-slate-600 font-normal;
    &.light,
    &.skin--default {
      @apply bg-slate-100;
    }
    &.lght,
    &.skin--bordered {
      @apply bg-transparent;
    }
    &.dark {
      @apply bg-[#0f172a];
    }
  }
  html,
  body {
    @apply h-full;
  }

  .app-wrapper {
    @apply relative;
  }
  .space-x-rb {
    > div,
    > button,
    > a {
      @apply mr-3 mb-3;
    }
  }
  .card-border-b {
    @apply border-b border-slate-100 dark:border-slate-700 pb-5  -mx-6 px-6 mb-6;
  }

  .simplebar-scrollbar {
    &:before {
      @apply bg-slate-600;
    }

    &.simplebar-visible {
      &:before {
        @apply opacity-100;
      }
    }
  }
  .dark {
    .simplebar-scrollbar {
      &:before {
        @apply bg-slate-700;
      }

      &.simplebar-visible {
        &:before {
          @apply opacity-100;
        }
      }
    }
  }

  .nav-tools {
    > span {
      @apply flex;
    }
  }
  .rounded-circile {
    border-radius: 100% !important;
  }
  .custom-dropshadow {
    filter: drop-shadow(0px 2px 4px rgba(40, 41, 61, 0.04))
      drop-shadow(0px 8px 16px rgba(96, 97, 112, 0.16));
  }
  .dark {
    .custom-dropshadow {
      filter: drop-shadow(0px 2px 4px rgba(40, 41, 61, 0.8))
        drop-shadow(0px 8px 16px rgba(96, 97, 112, 0.16));
    }
  }
  .legend-ring {
    .apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker {
      @apply ring-4  ring-primary-500 ring-opacity-30;
    }
    .apexcharts-legend-series:nth-child(2) .apexcharts-legend-marker {
      @apply ring-4  ring-info-500 ring-opacity-30;
    }
    .apexcharts-legend-series:nth-child(3) .apexcharts-legend-marker {
      @apply ring-4  ring-warning-500 ring-opacity-30;
    }
  }
  .legend-ring2 {
    .apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker {
      @apply ring-4  ring-info-500 ring-opacity-30;
    }
    .apexcharts-legend-series:nth-child(2) .apexcharts-legend-marker {
      @apply ring-4  ring-warning-500 ring-opacity-30;
    }
  }

  .legend-ring3 {
    .apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker {
      @apply ring-4  ring-success-500 ring-opacity-30;
    }
    .apexcharts-legend-series:nth-child(2) .apexcharts-legend-marker {
      @apply ring-4  ring-warning-500 ring-opacity-30;
    }
    .apexcharts-legend-series:nth-child(3) .apexcharts-legend-marker {
      @apply ring-4  ring-secondary-500 ring-opacity-30;
    }
  }

  .legend-ring4 {
    .apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker {
      @apply ring-4  ring-primary-500 ring-opacity-30;
    }
    .apexcharts-legend-series:nth-child(2) .apexcharts-legend-marker {
      @apply ring-4  ring-warning-500 ring-opacity-30;
    }
  }
}
@layer components {
  @import "components/button";
  @import "components/typography";
  @import "components/form";
  @import "components/date-picker";
  @import "components/widget";
  @import "components/table";
  @import "app/calander";
  @import "components/animation";
  .card-auto {
    .card {
      @apply h-auto;
    }
  }
  .Vue-Toastification__toast.dashcode-toast {
    @apply font-Inter text-sm shadow-base rounded-md;
  }
}
@layer utilities {
}
