@use 'pix-design-tokens/typography';

.pix-label {
  display: block;
  color: var(--pix-neutral-900);
  font-weight: var(--pix-font-medium);

  &--disabled {
    color: var(--pix-neutral-500);
  }

  &--default {
    @extend %pix-body-m;
  }

  &--small {
    @extend %pix-body-s;
  }

  &--large {
    @extend %pix-body-l;
  }

  &--inline-label {
    flex-shrink: 0;
    font-weight: var(--pix-font-normal);
  }

  &__sub-label {
    @extend %pix-body-xs;

    display: block;
    color: var(--pix-neutral-500);
  }
}