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

@layer components {
  .skewed-background {
    @apply relative before:absolute before:left-0 before:top-0 before:z-0 before:h-full before:w-full before:-skew-x-12;
  }

  .button-like {
    @apply centered h-10 rounded-3xl px-5 font-semibold;
  }

  .centered {
    @apply flex items-center justify-center;
  }

  .spacer {
    @apply mx-auto my-auto;
  }

  .spaced-list ul li + li {
    @apply mt-[10px];
  }

  .spaced-list-sm ul li + li {
    @apply mt-[5px];
  }

  .arrow-list ul li {
    @apply bg-[url(/assets/arrow.png)] bg-[length:5px_8px] bg-[left_top_8px] bg-no-repeat pl-[15px] sm:bg-left;
  }

  .arrow-list-offer ul li {
    @apply bg-[url(/assets/arrow.png)] bg-[length:5px_8px] bg-[left_6px] bg-no-repeat pl-[15px];
  }

  .tick-list ul li {
    @apply bg-[url(/assets/tick.png)] bg-[length:20px_20px] bg-[left_top_3px] bg-no-repeat pl-[30px] sm:bg-left;
  }

  input.disable-input-arrow ::-webkit-outer-spin-button,
  input.disable-input-arrow::-webkit-inner-spin-button {
    /* Chrome, Safari, Edge, Opera */
    -webkit-appearance: none;
    margin: 0;
    /* Firefox */
    -moz-appearance: textfield;
  }
}