/* docara-shell-source: runtime/component/verification/css/verification.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  .sf-verification {
    --sf-verification--cell-size: var(--sf-title-height-6);
    --sf-verification--gap: var(--sf-space-1\/3);
    --sf-verification--radius: var(--sf-radius--ui);
    --sf-verification--border-width: var(--sf-px);
    position: relative;
    display: inline-grid;
    color: var(--sf-on-surface);
    border-radius: var(--sf-verification--radius);
  }
  .sf-verification-cells,
  .sf-verification-form-wrap {
    display: flex;
    gap: var(--sf-verification--gap);
    direction: ltr;
  }
  .sf-verification-cell,
  .sf-verification-form-wrap .sf-verification {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    width: var(--sf-verification--cell-size);
    inline-size: var(--sf-verification--cell-size);
    height: var(--sf-verification--cell-size);
    block-size: var(--sf-verification--cell-size);
    box-sizing: border-box;
    border: var(--sf-verification--border-width) solid var(--sf-outline);
    border-radius: var(--sf-verification--radius);
    background: var(--sf-surface-0);
    color: var(--sf-on-surface);
    font-family: var(--sf-text--family);
    font-size: var(--sf-text-size-1);
    font-size: var(--sf-verification--font-size, var(--sf-text-size-1));
    font-weight: var(--sf-font-weight-regular);
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-verification--line-height, var(--sf-text-height-1));
  }
  .sf-verification-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 1;
    width: 100%;
    inline-size: 100%;
    height: 100%;
    block-size: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 0;
    opacity: 0;
    cursor: text;
  }
  .sf-verification-input:focus {
    outline: 0;
  }
  .sf-verification[\:has\(.sf-verification-input.focus-visible\)],
  .sf-verification-form-wrap .sf-verification[\:has\(input.focus-visible\)] {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-verification:has(.sf-verification-input.focus-visible),
  .sf-verification-form-wrap .sf-verification:has(input.focus-visible) {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-verification[\:has\(.sf-verification-input\:focus-visible\)],
  .sf-verification-form-wrap .sf-verification[\:has\(input\:focus-visible\)] {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-verification:has(.sf-verification-input:focus-visible),
  .sf-verification-form-wrap .sf-verification:has(input:focus-visible) {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-verification-cell.current {
    border-color: var(--sf-primary);
  }
  .sf-verification--filled .sf-verification-cell,
  .sf-verification-form--filled .sf-verification-form-wrap .sf-verification {
    border-color: transparent;
    background: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .sf-verification:hover .sf-verification-cell,
  .sf-verification-form-wrap .sf-verification:hover {
    border-color: var(--sf-primary-hover);
  }
  .sf-verification-form.error .sf-verification-cell,
  .sf-verification.error .sf-verification-cell,
  .sf-verification-form.error .sf-verification-form-wrap .sf-verification,
  .sf-verification.error {
    border-color: var(--sf-error);
    color: var(--sf-error);
  }
  .sf-verification[\:has\(input\:disabled\)] .sf-verification-cell,
  .sf-verification-form-wrap .sf-verification[\:has\(input\:disabled\)] {
    border-color: var(--sf-outline-disable);
    background: var(--sf-disable);
    color: var(--sf-on-disable);
    cursor: not-allowed;
  }
  .sf-verification:has(input:disabled) .sf-verification-cell,
  .sf-verification-form-wrap .sf-verification:has(input:disabled) {
    border-color: var(--sf-outline-disable);
    background: var(--sf-disable);
    color: var(--sf-on-disable);
    cursor: not-allowed;
  }
  .sf-verification--size-1\/2,
  .sf-verification-form--size-1\/2 {
    --sf-verification--cell-size: var(--sf-title-height-4);
    --sf-verification--font-size: var(--sf-text-size-1\/2);
    --sf-verification--line-height: var(--sf-text-height-1\/2);
  }
  .sf-verification--size-1,
  .sf-verification-form--size-1 {
    --sf-verification--cell-size: var(--sf-title-height-6);
    --sf-verification--font-size: var(--sf-text-size-1);
    --sf-verification--line-height: var(--sf-text-height-1);
  }
  .sf-verification--size-2,
  .sf-verification-form--size-2 {
    --sf-verification--cell-size: var(--sf-title-height-7);
    --sf-verification--font-size: var(--sf-text-size-2);
    --sf-verification--line-height: var(--sf-text-height-2);
  }
  @media (forced-colors: active) {
    .sf-verification-cell,
    .sf-verification-form-wrap .sf-verification {
      border-color: CanvasText;
    }
    .sf-verification[\:has\(.sf-verification-input.focus-visible\)],
    .sf-verification-form-wrap .sf-verification[\:has\(input.focus-visible\)] {
      outline: var(--sf-px) solid Highlight;
      outline-offset: var(--sf-px);
    }
    .sf-verification:has(.sf-verification-input.focus-visible),
    .sf-verification-form-wrap .sf-verification:has(input.focus-visible) {
      outline: var(--sf-px) solid Highlight;
      outline-offset: var(--sf-px);
    }
    .sf-verification[\:has\(.sf-verification-input\:focus-visible\)],
    .sf-verification-form-wrap .sf-verification[\:has\(input\:focus-visible\)] {
      outline: var(--sf-px) solid Highlight;
      outline-offset: var(--sf-px);
    }
    .sf-verification:has(.sf-verification-input:focus-visible),
    .sf-verification-form-wrap .sf-verification:has(input:focus-visible) {
      outline: var(--sf-px) solid Highlight;
      outline-offset: var(--sf-px);
    }
  }
}
/* A filled field reads as a field only by its fill, so while someone is typing
   in it -- focus anywhere inside, by pointer or keyboard -- it becomes the
   ordinary field: the surface of a bordered field and a visible boundary. The
   fill comes back when focus leaves. Error, disabled and read-only fields keep
   their own look. */
@layer sf.components {
  .sf-verification--filled:not(.error)[\:has\(.sf-verification-input\:enabled\:focus\)] .sf-verification-cell,
  .sf-verification-form--filled:not(.error)[\:has\(input\:enabled\:focus\)] .sf-verification-form-wrap .sf-verification {
    background: var(--sf-surface-0);
    border-color: var(--sf-outline);
  }
  .sf-verification--filled:not(.error):has(.sf-verification-input:enabled:focus) .sf-verification-cell,
  .sf-verification-form--filled:not(.error):has(input:enabled:focus) .sf-verification-form-wrap .sf-verification {
    background: var(--sf-surface-0);
    border-color: var(--sf-outline);
  }
  /* The cell the next character goes to. In a filled field the fill rule came
     after .current and took its border away, so the caret had no place. */
  .sf-verification--filled:not(.error) .sf-verification-cell.current,
  .sf-verification--filled:not(.error)[\:has\(.sf-verification-input\:enabled\:focus\)] .sf-verification-cell.current,
  .sf-verification-form--filled:not(.error)[\:has\(input\:enabled\:focus\)] .sf-verification-form-wrap .sf-verification[\:has\(input\:focus\)] {
    border-color: var(--sf-primary);
  }
  .sf-verification--filled:not(.error) .sf-verification-cell.current,
  .sf-verification--filled:not(.error):has(.sf-verification-input:enabled:focus) .sf-verification-cell.current,
  .sf-verification-form--filled:not(.error):has(input:enabled:focus) .sf-verification-form-wrap .sf-verification:has(input:focus) {
    border-color: var(--sf-primary);
  }
}
@layer sf.components {
  .sf-verification-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sf-space-1\/3);
  }
  .sf-verification-form-label {
    color: var(--sf-on-surface);
    font-family: var(--sf-text--family);
    font-size: var(--sf-text-size-1);
    font-weight: var(--sf-font-weight-medium);
    line-height: var(--sf-text-height-1);
  }
  .sf-verification-form-hint {
    color: var(--sf-on-surface-variant);
    font-family: var(--sf-text--family);
    font-size: var(--sf-text-size-1\/3);
    font-weight: var(--sf-font-weight-regular);
    line-height: var(--sf-text-height-1\/3);
  }
  .sf-verification-form.error .sf-verification-form-hint {
    color: var(--sf-error);
  }
}
@layer sf.components {
  /* Project overrides belong in semantic component variables, not raw values. */
}