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

[role="alert"] {
  @apply fixed top-0 left-0 right-0 z-50 text-center;

  li {
    @apply p-4;

    &.success {
      @apply bg-green-50 text-green-900;
    }

    &.warning {
      @apply bg-yellow-50 text-yellow-900;
    }

    &.failure {
      @apply bg-red-50 text-red-900;
    }
  }
}

section {
  margin: 0.5rem 0;
}

header {
  margin: 1rem 0 0.5rem 0;

  nav {
    @apply flex justify-between;

    ul {
      @apply flex items-center;
    }
  }
}

main {
  @apply container mx-auto;
}

dialog {
  @apply prose;
  @apply w-full sm:w-1/2 lg:w-1/3;
  @apply h-screen flex flex-col justify-center;

  header {
    @apply text-center;
  }

  footer {
    @apply py-4 text-center;
  }

  form {
    @apply bg-slate-100 border border-slate-200 rounded;
    @apply grid gap-4 p-4;

    fieldset {
      @apply grid gap-4;

      section {
        @apply grid gap-2;

        label {
          @apply font-semibold;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
          @apply rounded;
        }

        small {
          @apply text-xs text-gray-500;
        }
      }
    }

    input[type="submit"] {
      @apply border border-b-2 cursor-pointer bg-blue-500 border-blue-600 text-white rounded;
      @apply hover:bg-blue-600 hover:border-blue-700;
      @apply px-4 py-2;
    }

    a {
      @apply underline text-blue-500;
      @apply hover:text-blue-700 hover:decoration-2;
      @apply px-4 py-2;
    }
  }
}

form.button_to button[type="submit"] {
  @apply border border-b-2 cursor-pointer bg-blue-500 border-blue-600 text-white rounded;
  @apply hover:bg-blue-600 hover:border-blue-700;
  @apply px-4 py-2;
}

dl {
  @apply prose;
}

h1 {
  @apply text-3xl font-bold;
  margin-bottom: 1rem;
}

h2 {
  @apply text-2xl font-bold;
  margin-bottom: 0.5rem;
}

h3 {
  @apply text-xl font-bold;
  margin-bottom: 0.25rem;
}

button {
  @apply border border-b-2 cursor-pointer bg-blue-500 border-blue-600 text-white rounded;
  @apply hover:bg-blue-600 hover:border-blue-700;
  @apply px-4 py-2;
  margin: 0.5rem 0;
}