@import './fonts.css';
@import './simplebar.css';

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

* {
  box-sizing: border-box;
}

@layer components {
  .h2-ui {
    @apply font-main leading-h2-ui tracking-[-0.02em] text-[44px] sm:leading-h1-ui;
  }

  .common-text {
    @apply text-sm leading-regular-ui;
  }

  .font-14-ui {
    @apply text-sm leading-regular-ui;
  }

  .font-18-ui {
    @apply font-main leading-sm-ui tracking-[-0.22px] font-medium text-[18px];
  }

  .font-22-ui {
    @apply font-main leading-sm-ui tracking-[-0.22px] font-medium text-[22px];
  }
}

input,
textarea {
  @apply focus:outline-0 focus-visible:outline-0 focus-visible:outline-none;
}

input[type='range']::-webkit-slider-thumb {
  @apply transition-all duration-std rounded-full border-none bg-gray-ui h-4 w-4 appearance-none mb-4 outline-[10px] outline-transparent
  outline hover:outline-gray-ui/5 active:outline-gray-ui/10;
}

input[type='range']:focus::-webkit-slider-thumb {
  @apply outline-gray-ui/10;
}

input[type='range']:disabled::-webkit-slider-thumb {
  @apply bg-gray-ui/a7 outline-none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  @apply appearance-none m-0;
}