// scss-lint:disable SpaceAfterPropertyColon
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'shared/assets/fonts/InterDisplay/inter-display';
@import 'shared/assets/fonts/inter';

// Next Colors
@import 'next-colors';

// Base styles for elements
@import 'base';

// Plugins
@import 'plugins/date-picker';

html,
body {
  font-family:
    'Inter',
    -apple-system,
    system-ui,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Tahoma,
    Arial,
    sans-serif !important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.tooltip {
  @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
}

#app {
  @apply h-full w-full;
}

.custom-dashed-border {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23E2E3E7' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.dark .custom-dashed-border {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23343434' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
}

@layer utilities {
  /* 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 */
  }

  /**
   * ============================================================================
   * TYPOGRAPHY UTILITIES
   * ============================================================================
   *
   * | Class              | Use Case                                           |
   * |--------------------|----------------------------------------------------|
   * | .text-body-main    | <p>, <span>, general body text                     |
   * | .text-body-para    | <p> for paragraphs, larger text blocks             |
   * | .text-heading-1    | <h1>, page titles, panel headers                   |
   * | .text-heading-2    | <h2>, section headings, card titles                |
   * | .text-heading-3    | <h3>, card headings, breadcrumbs, subsections      |
   * | .text-label        | <label>, form labels, field names                  |
   * | .text-label-small  | <small>, footnotes, tags, badges, captions         |
   * | .text-button       | <button>, standard button text                     |
   * | .text-button-small | <button>, small/compact button text                |
   */

  /* body-text-main: Main text style for general body text */
  .text-body-main {
    @apply font-inter text-sm font-420;
    line-height: 21px; /* 150% */
    letter-spacing: -0.28px;
  }

  /* body-text-paragraph: For paragraphs or larger blocks of text */
  .text-body-para {
    @apply font-inter text-sm font-420;
    line-height: 21px; /* 150% */
    letter-spacing: -0.21px;
  }

  /* heading-1: Large heading for pages and panels */
  .text-heading-1 {
    @apply font-inter text-lg font-520;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.27px;
  }

  /* heading-2: Secondary heading for sections */
  .text-heading-2 {
    @apply font-inter text-base font-medium;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.27px;
  }

  /* heading-3: For card headings, breadcrumbs, subsections */
  .text-heading-3 {
    @apply font-inter text-sm font-medium;
    line-height: 21px; /* 150% */
    letter-spacing: -0.27px;
  }

  /* label: Standard label text for form fields */
  .text-label {
    @apply font-inter text-sm font-medium;
    line-height: 21px; /* 150% */
  }

  /* label-small: Smallest font for labels, footnotes, tags */
  .text-label-small {
    @apply font-inter text-xs font-440;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.24px;
  }

  /* button-text: Text for standard size buttons */
  .text-button {
    @apply font-inter text-sm font-460;
    line-height: 21px; /* 150% */
    letter-spacing: -0.28px;
  }

  /* button-text-small: Text for smaller buttons */
  .text-button-small {
    @apply font-inter text-xs font-440;
    line-height: 18px; /* 150% */
    letter-spacing: -0.24px;
  }
}