/*! Required Notice: Copyright 2025 A Beautiful Site, LLC - https://quietui.org */
@layer quiet-utilities {
  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Side label
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* Side label utility */
  .quiet-side-label {
    --label-width: 10ch;

    display: grid;
    grid: auto / var(--label-width) 1fr;
    align-items: center;
    gap: 0.25em 1em;

    &::part(label) {
      max-width: none;
      text-align: end;
    }

    &::part(description) {
      grid-column-start: 2;
      order: 3;
      margin-block: 0;
    }
  }

  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Form validation
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* Valid */
  .quiet-user-valid:state(user-valid),
  .quiet-force-valid {
    color: var(--quiet-constructive-text-colorful);

    &::part(label),
    &::part(description) {
      color: var(--quiet-constructive-text-colorful);
    }

    &::part(visual-box),
    &:focus::part(visual-box) {
      border-color: var(--quiet-constructive-stroke-mid);
      outline-color: var(--quiet-constructive-stroke-mid);
    }
  }

  /* Invalid */
  .quiet-user-invalid:state(user-invalid),
  .quiet-force-invalid {
    color: var(--quiet-destructive-text-colorful);

    &::part(label),
    &::part(description) {
      color: var(--quiet-destructive-text-colorful);
    }

    &::part(visual-box),
    &:focus::part(visual-box) {
      border-color: var(--quiet-destructive-stroke-mid);
      outline-color: var(--quiet-destructive-stroke-mid);
    }
  }

  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Visually hidden
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  .quiet-vh,
  .quiet-vh-focusable:not(:focus-within),
  .quiet-vh-label::part(label),
  .quiet-vh-description::part(description) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //
  //  Light/dark utilities
  //
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* Toggle content based on light/dark */
  html:not(.quiet-dark) .quiet-if-dark,
  html.quiet-dark .quiet-if-light,
  .quiet-dark .quiet-if-light,
  .quiet-light .quiet-if-dark {
    display: none !important;
  }
}