.Wrapper {
  position: relative;
}

.Label-positionInside {
  position: absolute;
  pointer-events: none;
  inset-block-start: em(5.6px);
  inset-inline-start: em(12px);
  transition: all var(--x-duration-base) var(--x-timing-base);
  user-select: none;
  opacity: 0;
  transform: translateY(em(3px));
  z-index: 1;
  max-width: calc(100% - em(26px));

  &.Label-onBackgroundSurfacePrimary {
    --x-default-color-text-subdued: var(--x-color-surface-primary-text-subdued);
  }

  &.Label-onBackgroundSurfaceSecondary {
    --x-default-color-text-subdued: var(
      --x-color-surface-secondary-text-subdued
    );
  }

  &.Label-onBackgroundSurfaceTertiary {
    --x-default-color-text-subdued: var(
      --x-color-surface-tertiary-text-subdued
    );
  }
}

.Label-subdued {
  z-index: inherit;
}

.Label-positionOutside {
  display: block;
  margin-block-end: var(--x-spacing-tight4x);
}

.Label-nextToIcon {
  inset-inline-start: calc(em(12px) * 2);
  margin-inline-start: rem(24px);
}

.floating {
  & .Label {
    opacity: 1;
    transform: translateY(0);
  }
}