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

@layer base {
  html {
    font-family: 'Sofia Pro', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-gutter: stable;
  }

  table {
    border-collapse: collapse;
  }
  th,
  td {
    padding: 0;
  }

  *:focus,
  *:focus-visible {
    outline: none;
  }

  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type='number'] {
    -moz-appearance: textfield;
  }

  /* Override TailwindCSS Form */
  input,
  input[type],
  [multiple],
  textarea,
  select {
    color: #475569; /* gray-700 */
    border: 1px solid #cbd5e1; /* gray-400 */
    border-radius: 8px; /* rounded */
  }

  input::placeholder,
  input::-webkit-input-placeholder,
  input:-ms-input-placeholder,
  textarea::placeholder,
  textarea::-webkit-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #94a3b8; /* gray-500 */
  }

  input:focus,
  input[type]:focus,
  textarea:focus,
  select:focus {
    --tw-ring-color: #94a3b8; /* gray-500 */
    border-color: #94a3b8; /* gray-500 */
    box-shadow: none;
  }

  input[readonly]:focus {
    --tw-ring-color: #cbd5e1; /* gray-400 */
    border-color: #cbd5e1; /* gray-400 */
  }

  .sidebar-menu.active {
    @apply bg-primary-400 opacity-100;
  }

  .tab-item.active {
    @apply border-primary-500 text-primary-500;
  }
  .small-scroll::-webkit-scrollbar {
    width: 5px; /* Thin scrollbar */
  }
  .small-scroll::-webkit-scrollbar-thumb {
    @apply rounded-lg bg-gray-400;
  }

  .small-scroll::-webkit-scrollbar-track {
    @apply bg-gray-200;
  }

  [data-radix-popper-content-wrapper] {
    z-index: 9999 !important;
  }

  .hidden-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .hidden-scroll {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  html body[data-scroll-locked] {
    margin-right: 0 !important;
  }

  .japanese-language .typo-head-bold-huge,
  .japanese-language .typo-head-semi-huge,
  .japanese-language .typo-head-light-huge {
    font-size: 20px !important;
  }

  .japanese-language .typo-head-bold-big,
  .japanese-language .typo-head-semi-big,
  .japanese-language .typo-head-light-big {
    font-size: 19px !important;
  }

  .japanese-language .typo-head-bold-medium,
  .japanese-language .typo-head-semi-medium,
  .japanese-language .typo-head-light-medium {
    font-size: 17px !important;
  }

  .japanese-language .typo-head-bold-small,
  .japanese-language .typo-head-semi-small,
  .japanese-language .typo-head-light-small {
    font-size: 15px !important;
  }

  .japanese-language .typo-head-bold-tiny {
    font-size: 11px !important;
  }

  .japanese-language .typo-para-big {
    font-size: 17px !important;
  }

  .japanese-language .typo-para-medium {
    font-size: 15px !important;
  }

  .japanese-language .typo-para-small {
    font-size: 13px !important;
  }
}
