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

html {
  &:not(.allow-overscroll) {
    @apply overscroll-contain;
    body {
      @apply overscroll-contain;
    }
  }
}

body {
  min-height: 100vh;
}

@layer components {
  .field-label {
    @apply block font-semibold mb-5;
  }

  .button {
    @apply inline-block font-semibold focus:ring-4 focus:ring-accent-300 rounded-full px-20 py-15 focus:outline-none border border-mono-400 hover:border-accent-700 hover:text-accent-700 whitespace-nowrap;
    &.is-primary {
      @apply text-white bg-accent-700 hover:bg-accent-800 border-accent-700 hover:border-accent-700 hover:text-white;
    }

    &.is-inverted {
      @apply text-mono-300 hover:border-white hover:text-white;
    }
  }

  .container {
    @apply max-w-7xl mx-auto px-20 md:px-30;
  }
}

.entity-form {
  @apply p-20 mb-100;

  input,
  textarea {
    @apply w-full;
  }
}

.entity-form-footer {
  @apply fixed bottom-0 left-0 w-full p-20 border-t bg-white z-50 border-t-mono-300;

  input {
    @apply rounded bg-accent-700 text-white font-bold px-10 py-15 cursor-pointer;
  }
}

.field + .field {
  @apply mt-20;
}

.ck-content {
  @apply max-w-none;
  &.is-inverted {
    @apply text-mono-200;
  }
  ul.is-bulleted {
    li {
      @apply font-medium;
      &:before {
        content: '';
        @apply inline-block w-[16px] h-[16px] rounded-full bg-accent-700 mr-10 align-middle overflow-hidden;
        background-image: url(/check.svg);
        background-size: 60% 60%;
        background-position: center center;
        background-repeat: no-repeat;
      }
      &:not(:last-child) {
        @apply mb-10;
      }
    }
  }

  p + p {
    @apply mt-20;
  }

  h2 {
    @apply font-bold text-3xl;
  }

  h3 {
    @apply font-bold text-lg;
  }

  h4 {
    @apply uppercase font-semibold text-base;
  }
}
