@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;
}

/* Form styling */
form {
  @apply max-w-2xl;

  legend {
    @apply text-2xl font-bold mb-4;
  }

  [role="group"] {
    @apply mb-4;
  }

  label {
    @apply block font-semibold text-gray-700 mb-2;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="datetime-local"],
  textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }

  textarea {
    @apply min-h-[100px];
  }

  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;
  }

  footer {
    @apply mt-6;
  }
}

/* Breadcrumbs styling */
nav.breadcrumbs {
  @apply bg-gray-50 border-b border-gray-200 px-4 py-3;

  ol {
    @apply container mx-auto;
  }

  a {
    @apply text-blue-600 hover:text-blue-800 hover:underline;
  }
}