@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  *,
::before,
::after {
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
  h1,
  .t28 {
    @apply tw-text-[28px]  tw-font-medium tw-leading-9;
  }
  h2,
  .t24 {
    @apply tw-text-[24px]  tw-font-bold tw-leading-[31px];
  }
  .t20 {
    @apply tw-text-[20px]  tw-font-bold tw-leading-[26px];
  }
  h3,
  .t18 {
    @apply tw-text-[18px]  tw-font-bold tw-leading-[23px];
  }
  h4,
  .t16 {
    @apply tw-text-[16px]  tw-font-bold tw-leading-[21px];
  }
  .t14 {
    @apply tw-text-[14px]  tw-font-medium tw-leading-[18px];
  }
  .t12 {
    @apply tw-text-[12px]  tw-font-medium tw-leading-[16px];
  }
  .t10 {
    @apply tw-text-[10px]  tw-font-medium tw-leading-normal;
  }
  .tw-body-1 {
    @apply tw-text-[24px]  tw-font-medium tw-leading-[31px];
  }
  .tw-body-2 {
    @apply tw-text-[18px]  tw-font-medium tw-leading-[23px];
  }
  .tw-body-3 {
    @apply tw-text-[16px] tw-font-medium tw-leading-[21px];
  }
  .tw-body-4 {
    @apply tw-text-[14px]  tw-font-medium tw-leading-[18px];
  }
  .tw-body-5 {
    @apply tw-text-[12px]  tw-font-medium tw-leading-[16px];
  }
  .tw-head-title {
    @apply tw-text-[14px]  tw-font-medium tw-leading-[18px];
  }
  .tw-head-body {
    @apply tw-text-[14px] tw-font-normal tw-leading-[18px];
  }
  .tw-footer-title {
    @apply tw-text-[14px]  tw-font-medium tw-leading-[18px];
  }
  .tw-footer-body {
    @apply tw-text-[14px]  tw-font-normal tw-leading-[18px];
  }
  .tw-btn {
    @apply tw-text-[14px] tw-text-neutrals-100 tw-font-normal tw-leading-[18px];
  }
  .tw-btn-md {
    @apply tw-text-[16px] tw-text-neutrals-100 tw-font-normal tw-leading-[21px];
  }
  .tw-btn-xl {
    @apply tw-text-[18px] tw-text-neutrals-100 tw-font-normal tw-leading-[23px];
  }
}
@layer components {
  label {
    @apply t14 tw-font-medium tw-text-black;
  }
  .required {
    @apply tw-text-error-default tw-inline-block;
  }
  button:disabled {
    @apply tw-border tw-border-solid tw-text-neutrals-300 tw-border-neutrals-300 tw-bg-neutrals-0 tw-pointer-events-none;
  }
  .element input[type="text"],
  .element input[type="email"],
  .element input[type="tel"],
  .element input[type="street"],
  .element input[type="zip"] {
    @apply tw-body-4 tw-text-black tw-outline-none tw-px-[20px] tw-py-[12px]  tw-border-solid tw-border tw-border-neutrals-200 tw-rounded hover:tw-border-primary-2 focus:tw-border-primary-2;
  }
  .element textarea {
    @apply tw-body-4 tw-text-black tw-outline-none tw-px-[10px] tw-py-[10px]  tw-border-solid tw-border tw-border-neutrals-200 tw-rounded hover:tw-border-primary-2 focus:tw-border-primary-2;
  }
  .element .country-selector__input,
  .element .input-tel__input {
    @apply tw-body-4 tw-text-black hover:tw-border-primary-2 focus:tw-border-primary-2 focus:tw-shadow-none !important;
  }
  .element .vue-phone-number-input {
    @apply tw-flex;
  }
  .element .country-selector__label {
    @apply tw-pointer-events-none;
  }
  .element select {
    @apply tw-body-4 tw-text-black tw-outline-none tw-px-[20px] tw-py-[12px]  tw-border-solid tw-border tw-border-neutrals-200 tw-rounded hover:tw-border-primary-2 focus:tw-border-primary-2;
  }
}