@import "../main.css";

@layer components {
  .pin-input {
    width: auto;
    max-width: var(--container-md);
  }

  .pin-input[data-loading] [data-scope="pin-input"][data-part="root"] {
    @apply ui-loading;
  }

  .pin-input [data-scope="pin-input"][data-part="root"] {
    @apply ui-root;

    gap: --spacing(4);
    position: relative;
    padding-inline-end: var(--spacing-space);
  }

  .pin-input [data-scope="pin-input"][data-part="root"][data-disabled] {
    opacity: 0.6;
    pointer-events: none;
  }

  .pin-input [data-scope="pin-input"][data-part="root"][data-readonly],
  .pin-input [data-scope="pin-input"][data-part="root"][data-read-only] {
    @apply ui-readonly;
  }

  .pin-input [data-scope="pin-input"][data-part="label"] {
    @apply ui-label;
  }

  .pin-input [data-scope="pin-input"][data-part="label"][data-invalid] {
    color: var(--color-alert);
  }

  .pin-input [data-scope="pin-input"][data-part="label"][data-disabled] {
    color: var(--color-ink-muted);
  }

  .pin-input [data-scope="pin-input"][data-part="label"][data-complete] {
    color: var(--color-success);
  }

  .pin-input [data-scope="pin-input"][data-part="label"][data-readonly] {
    color: var(--color-ink-muted);
  }

  .pin-input [data-scope="pin-input"][data-part="control"] {
    display: flex;
    flex-flow: row nowrap;
    gap: --spacing(4);
    align-items: center;
    margin-inline: auto;
  }

  .pin-input [data-scope="pin-input"][data-part="input"] {
    @apply ui-input;

    height: --spacing(11);
    width: --spacing(11);
    flex-shrink: 0;
    text-align: center;
  }

  .pin-input [data-scope="pin-input"][data-part="input"][data-complete] {
    color: var(--color-success-ink);
    background-color: var(--color-success);
    border-color: var(--color-border);
  }

  .pin-input [data-scope="pin-input"][data-part="input"][data-invalid] {
    color: var(--color-alert-ink);
    background-color: var(--color-alert);
    border-color: var(--color-border);
  }

  .pin-input [data-scope="pin-input"][data-part="input"][data-disabled] {
    color: var(--color-ink-muted);
    background-color: var(--color-ui-muted);
    cursor: not-allowed;
  }
}