/* Web Awesome theme customizations */
:root,
.wa-light,
.wa-dark .wa-invert {
  --wa-link-decoration-default: none
    color-mix(in oklab, var(--wa-color-text-link) 70%, transparent);
}

/* Variables */
:root {
  /* Breakpoints */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;

  --container-padding: 1rem;
  --container-small-size: 32rem;
}

/* Styling to make Alpine x-cloak directive work. */
[x-cloak] {
  display: none !important;
}

/* TODO: Move to a separate layout.css file once we have organized our global stylesheets. */
/* Layout */
main {
  padding-block: var(--wa-space-2xl);
}

/* Container utilities */
.kaivo-container {
  width: 100%;
  padding-inline: var(--container-padding);
  margin-inline: auto;
}

/* On smaller screens we use as much of the screen estate as possible. */
@media (min-width: 64rem) {
  .kaivo-container {
    max-width: var(--breakpoint-lg);
  }
}

@media (min-width: 80rem) {
  .kaivo-container {
    max-width: var(--breakpoint-xl);
  }
}

@media (min-width: 96rem) {
  .kaivo-container {
    max-width: var(--breakpoint-2xl);
  }
}

/* Restrict contained elements to a specific width */
.kaivo-container-small {
  width: 100%;
}

@media (min-width: 32rem) {
  .kaivo-container-small {
    max-width: var(--container-small-size);
    margin-inline: auto;
  }
}

.kaivo-truncated-text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TODO: Move to a separate forms.css (or typography.css) file once we have organized our global stylesheets. */
/* Forms */
.kaivo-form-intro {
  h1 {
    font-size: var(--wa-font-size-xl);
  }

  h2 {
    font-size: var(--wa-font-size-l);
  }

  h3 {
    font-size: var(--wa-font-size-m);
  }

  h4 {
    font-size: var(--wa-font-size-s);
  }
}

/* Prevent user interaction with a form while it's processing. */
[aria-busy="true"] form,
form[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.6;
}

/* Make sure form fields inside Details component don't exceed the container width. */
wa-details input,
wa-details select {
  box-sizing: border-box;
}

fieldset:not(:has(legend)) {
  border: none;
  padding: 0;
}

/*
Make sure empty fieldsets do not render any whitespace. Ideally empty fieldsets
wouldn't be rendered at all, but with our current logic, ServerOnly* fields can
produce them.
*/
fieldset:not(:has(*)) {
  display: none;
}