@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./workflow.css";

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .title-hero {
    @apply text-[48px] font-medium text-font-dark font-['Prompt'];
  }

  .title-bold {
    @apply text-[32px] font-medium text-font-dark font-['Prompt'];
  }

  .header-bold {
    @apply text-[21px] font-normal text-font-dark font-['Prompt'];
  }

  .header-base {
    @apply text-[16px] font-normal text-font-dark font-['Prompt'];
  }

  .header-subtitle-strong {
    @apply text-[14px] font-normal text-font-dark font-['Prompt'] tracking-spacing-030;
  }

  .header-subtitle-light {
    @apply text-[14px] font-light text-font-dark font-['Prompt'];
  }

  .header-field-title {
    @apply text-[12px] font-normal text-font-dark font-['Prompt'] tracking-spacing-040;
  }

  .body-emphasis {
    @apply text-[16px] font-semibold text-font-dark font-['Sarabun'] tracking-spacing-034;
  }

  .body-strong {
    @apply text-[14px] font-medium text-font-dark font-['Sarabun'] tracking-spacing-030;
  }

  .body-base {
    @apply text-[14px] font-extralight text-font font-['Sarabun'] tracking-spacing-030;
  }

  .paragraph-base {
    @apply !text-[14px] font-light text-font font-['Sarabun'] tracking-spacing-030;
  }

  .paragraph-small {
    @apply text-[12px] font-light text-font font-['Sarabun'] tracking-spacing-026;
  }

  .tagline-medium {
    @apply text-[12px] font-medium text-font font-['Sarabun'] tracking-spacing-026;
  }

  .tagline-base {
    @apply text-[12px] font-light text-font font-['Sarabun'] tracking-spacing-026;
  }

  .tagline-small-bold {
    @apply text-[12px] font-bold text-font font-['Sarabun'] tracking-spacing-026;
  }

  .tagline-small {
    @apply text-[12px] font-light text-font font-['Sarabun'] tracking-spacing-026;
  }
}

.rmdp-week-day {
  color: rgb(var(--color-primary)) !important;
}

.rmdp-arrow {
  border-color: rgb(var(--color-primary)) !important;
}

.rmdp-arrow-container:hover {
  background-color: rgba(var(--color-primary), 0.3) !important;
}

.rmdp-day.rmdp-selected span:not(.highlight) {
  background-color: rgb(var(--color-primary)) !important;
}

@media (hover: hover) {
  .rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden) span:hover {
    background-color: rgba(var(--color-primary), 0.3) !important;
  }
}