@layer label {
  .label-stage {
    align-items: center;
  }

  .label-examples {
    display: grid;
    gap: 2rem;
    width: min(100%, 25rem);
  }

  .label-field {
    display: grid;
    gap: 0.625rem;
  }

  .label-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    user-select: none;
  }

  .label-input {
    width: 100%;
    height: 2.25rem;
    min-width: 0;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    outline: none;
    background: transparent;
    box-shadow: var(--shadow-xs);
    color: var(--foreground);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  .label-input::placeholder {
    color: var(--muted-foreground);
  }

  .label-input:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
  }

  .label-description {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }

  .label-options {
    display: grid;
    gap: 1.25rem;
    min-inline-size: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border);
    padding: 1.75rem 0 0;
  }

  .label-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .label-checkbox {
    appearance: none;
    display: grid;
    flex: 0 0 auto;
    place-content: center;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid var(--input);
    border-radius: 4px;
    outline: none;
    background: transparent;
    color: var(--primary-foreground);
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  }

  .label-checkbox::before {
    width: 0.3125rem;
    height: 0.5625rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    content: "";
    transform: translateY(-1px) rotate(45deg) scale(0);
    transition: transform 100ms ease;
  }

  .label-checkbox:checked {
    border-color: var(--primary);
    background: var(--primary);
  }

  .label-checkbox:checked::before {
    transform: translateY(-1px) rotate(45deg) scale(1);
  }

  .label-checkbox:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
  }

  .label-checkbox:disabled,
  .label-checkbox:disabled + .label-control {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .label-option-rtl {
    justify-content: flex-end;
  }

  @media (prefers-color-scheme: dark) {
    .label-checkbox:not(:checked) {
      background: rgb(255 255 255 / 0.045);
    }
  }

  @media (max-width: 540px) {
    .label-examples {
      gap: 1.75rem;
    }

    .label-options {
      gap: 1.125rem;
      padding: 1.5rem 0 0;
    }
  }
}