.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-pp-duration-base) var(--x-pp-timing-base);
  user-select: none;
  opacity: 0;
  z-index: 1;
  max-width: calc(100% - em(26px));

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

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

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

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

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

.isFloating {
  & .Label {
    opacity: 1;
  }
}