.water-icon {
  display: inline-block;
  inline-size: var(--water-space-5);
  block-size: var(--water-space-5);
  flex: none;
  vertical-align: middle;
}

.water-icon-control {
  background-color: currentColor;
  -webkit-mask-image: var(--water-icon-url);
  mask-image: var(--water-icon-url);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.water-icon-art {
  object-fit: contain;
}

.water-interactive-surface {
  --_water-transform-duration: var(--water-duration-hover);
  --_water-transform-ease: var(--water-ease-hover);

  transform-origin: center;
  transition:
    border-color var(--water-duration-fast) var(--water-ease-standard),
    box-shadow var(--water-duration-fast) var(--water-ease-standard),
    transform var(--_water-transform-duration) var(--_water-transform-ease);
}

.water-icon-button {
  display: inline-grid;
  inline-size: var(--water-tap-min);
  min-inline-size: var(--water-tap-min);
  block-size: var(--water-tap-min);
  min-block-size: var(--water-tap-min);
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--water-radius-control);
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.water-button {
  --_water-button-spinner-color: var(--water-color-text);

  position: relative;
  display: inline-flex;
  min-block-size: var(--water-tap-min);
  align-items: center;
  justify-content: center;
  gap: var(--water-space-2);
  padding-block: var(--water-space-2);
  padding-inline: var(--water-space-4);
  border: thin solid transparent;
  border-radius: var(--water-radius-control);
  font: inherit;
  font-size: var(--water-font-size-base);
  font-weight: var(--water-font-weight-semibold);
  line-height: var(--water-line-height-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.water-interactive-control,
.water-menu-item,
.water-button,
.water-icon-button {
  --_water-transform-duration: var(--water-duration-hover);
  --_water-transform-ease: var(--water-ease-hover);

  transform-origin: center;
  transition:
    background-color var(--water-duration-fast) var(--water-ease-standard),
    border-color var(--water-duration-fast) var(--water-ease-standard),
    color var(--water-duration-fast) var(--water-ease-standard),
    transform var(--_water-transform-duration) var(--_water-transform-ease);
}

.water-chevron {
  transition: transform var(--water-duration-fast) var(--water-ease-standard);
}

.water-disclosure[open] > summary .water-chevron {
  transform: rotate(180deg);
}

.water-button-primary,
.water-button-danger {
  --_water-button-spinner-color: var(--water-color-on-primary);
}

.water-button-primary {
  border-color: var(--water-color-primary);
  background: var(--water-color-primary);
  color: var(--water-color-on-primary);
}

.water-button-secondary {
  border-color: var(--water-color-border);
  background: var(--water-color-surface);
  color: var(--water-color-text);
}

.water-button-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--water-color-text);
}

.water-button-danger {
  border-color: var(--water-color-danger);
  background: var(--water-color-danger);
  color: var(--water-color-on-primary);
}

.water-button-sm {
  padding-inline: var(--water-space-3);
  font-size: var(--water-font-size-sm);
}

.water-button-big {
  inline-size: 100%;
  padding-block: var(--water-space-4);
  font-size: var(--water-font-size-lg);
}

.water-button:disabled,
.water-button[aria-disabled="true"] {
  --_water-button-spinner-color: var(--water-color-muted);

  background: var(--water-color-primary-soft);
  color: var(--water-color-muted);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.water-button.is-success {
  --_water-button-spinner-color: var(--water-color-success-ink);

  border-color: var(--water-color-success-line);
  background: var(--water-color-success-soft);
  color: var(--water-color-success-ink);
  transform: none;
}

.water-button[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
  transform: none;
}

.water-button[aria-busy="true"]::after {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  inline-size: var(--water-space-4);
  block-size: var(--water-space-4);
  margin: auto;
  border: var(--water-focus-width) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  color: var(--_water-button-spinner-color);
  animation: water-button-spin var(--water-duration-slow) linear infinite;
  content: "";
}

@keyframes water-button-spin {
  to {
    transform: rotate(1turn);
  }
}

:is(
  .water-interactive-surface,
  .water-interactive-control,
  .water-menu-item,
  .water-button,
  .water-icon-button,
  .water-field-control
):focus-visible {
  outline: var(--water-focus-width) solid var(--water-focus-color);
  outline-offset: var(--water-focus-offset);
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .water-interactive-surface,
    .water-interactive-control,
    .water-menu-item,
    .water-button,
    .water-icon-button
  ):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    transform: scale3d(var(--water-scale-hover), var(--water-scale-hover), 1);
  }

  .water-interactive-surface:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    border-color: var(--water-color-primary);
    box-shadow: var(--water-elevation-raised);
  }

  .water-interactive-control:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    border-color: var(--water-color-interactive-control-hover-border, var(--water-color-primary));
    background-color: var(--water-color-interactive-control-hover-background, var(--water-color-primary-soft));
  }

  .water-menu-item:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    border-color: var(--water-color-interactive-control-hover-border, var(--water-color-primary));
    background-color: var(--water-color-menu-item-hover-background, var(--water-color-primary-soft));
  }

  .water-icon-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    border-color: var(--water-color-primary);
    background-color: var(--water-color-primary-soft);
  }

  .water-button-primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    background-color: color-mix(in srgb, var(--water-color-primary) 88%, var(--water-color-text));
  }

  .water-button-secondary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover,
  .water-button-ghost:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    background-color: var(--water-color-primary-soft);
  }

  .water-button-danger:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    background-color: color-mix(in srgb, var(--water-color-danger) 88%, var(--water-color-text));
  }
}

@media (hover: none), (pointer: coarse) {
  .water-icon-button.result-menu-toggle:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    background: transparent;
    color: var(--water-color-muted);
  }

  .water-button-primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    border-color: var(--water-color-primary);
    background-color: var(--water-color-primary);
    color: var(--water-color-on-primary);
  }

  .water-button-secondary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    border-color: var(--water-color-border);
    background-color: var(--water-color-surface);
    color: var(--water-color-text);
  }

  .water-button-ghost:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    border-color: transparent;
    background-color: transparent;
    color: var(--water-color-text);
  }

  .water-button-danger:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    border-color: var(--water-color-danger);
    background-color: var(--water-color-danger);
    color: var(--water-color-on-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .water-interactive-surface,
    .water-interactive-control,
    .water-menu-item,
    .water-button,
    .water-icon-button
  ):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):hover {
    transform: none;
  }
}

.water-interactive-surface:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):active,
.water-interactive-control:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):active,
.water-menu-item:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):active,
.water-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):active,
.water-icon-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-success):active {
  --_water-transform-duration: var(--water-duration-fast);
  --_water-transform-ease: var(--water-ease-standard);

  transform: translateY(var(--water-translate-press));
}

.water-interactive-surface:disabled,
.water-interactive-surface[aria-disabled="true"],
.water-interactive-surface[aria-busy="true"],
.water-interactive-surface.is-success,
.water-interactive-control:disabled,
.water-interactive-control[aria-disabled="true"],
.water-interactive-control[aria-busy="true"],
.water-interactive-control.is-success,
.water-menu-item:disabled,
.water-menu-item[aria-disabled="true"],
.water-menu-item[aria-busy="true"],
.water-menu-item.is-success,
.water-icon-button:disabled,
.water-icon-button[aria-disabled="true"],
.water-icon-button[aria-busy="true"],
.water-icon-button.is-success {
  transform: none;
}

.water-form {
  display: grid;
  gap: var(--water-space-4);
}

.water-field {
  display: grid;
  gap: var(--water-space-2);
}

.water-field-label {
  color: var(--water-color-text);
  font-size: var(--water-font-size-sm);
  font-weight: var(--water-font-weight-semibold);
  line-height: var(--water-line-height-snug);
}

.water-field-control {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--water-tap-min);
  padding-block: var(--water-space-2);
  padding-inline: var(--water-space-3);
  border: thin solid var(--water-color-border);
  border-radius: var(--water-radius-control);
  background: var(--water-color-surface);
  color: var(--water-color-text);
  font: inherit;
}

.water-field-control:is(.is-invalid, [aria-invalid="true"]) {
  border-color: var(--water-color-danger);
}

.water-field-error {
  margin: 0;
  color: var(--water-color-danger);
  font-size: var(--water-font-size-sm);
  line-height: var(--water-line-height-snug);
}

.water-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--water-space-3);
}

.water-card {
  padding: var(--water-space-4);
  border: thin solid var(--water-color-border);
  border-radius: var(--water-radius-card);
  background: var(--water-color-surface);
  box-shadow: var(--water-elevation-card);
  color: var(--water-color-text);
}

.water-card-title {
  margin: 0;
  color: var(--water-color-text);
  font-size: var(--water-font-size-lg);
  font-weight: var(--water-font-weight-bold);
  line-height: var(--water-line-height-snug);
}

.water-row {
  display: flex;
  min-block-size: var(--water-tap-min);
  align-items: center;
  gap: var(--water-space-3);
  color: var(--water-color-text);
}

.water-row + .water-row {
  border-block-start: thin solid var(--water-color-border);
}

.water-row-main {
  min-inline-size: 0;
  flex: auto;
}

.water-row-label {
  margin: 0;
  font-size: var(--water-font-size-base);
  font-weight: var(--water-font-weight-semibold);
  line-height: var(--water-line-height-snug);
}

.water-row-meta {
  margin: 0;
  color: var(--water-color-muted);
  font-size: var(--water-font-size-sm);
  line-height: var(--water-line-height-normal);
}

.water-dialog[hidden] {
  display: none;
}

.water-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--water-z-overlay);
  display: grid;
  place-items: center;
  padding-block-start: max(var(--water-space-4), var(--water-safe-top));
  padding-inline-end: max(var(--water-space-4), var(--water-safe-right));
  padding-block-end: max(var(--water-space-4), var(--water-safe-bottom));
  padding-inline-start: max(var(--water-space-4), var(--water-safe-left));
  background: var(--water-color-text);
  background: color-mix(in srgb, var(--water-color-text), transparent);
}

@media (prefers-reduced-transparency: reduce) {
  .water-dialog {
    background: var(--water-color-text);
  }
}

.water-dialog-card {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--water-dialog-max-inline);
  max-block-size: calc(100% - var(--water-space-6));
  overflow: auto;
  padding: var(--water-space-5);
  border: thin solid var(--water-color-border);
  border-radius: var(--water-radius-card);
  background: var(--water-color-surface);
  box-shadow: var(--water-elevation-card);
  color: var(--water-color-text);
}

.water-dialog-title {
  margin: 0;
  font-size: var(--water-font-size-xl);
  font-weight: var(--water-font-weight-bold);
  line-height: var(--water-line-height-tight);
}

.water-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--water-space-3);
  margin-block-start: var(--water-space-5);
}