.labelled-element {
  position: relative;
  height: 54px;

  &__label {
    display: flex;
    align-items: center;
    position: absolute;
    pointer-events: none;
    left: 16px;
    z-index: 1;
    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: left;
    transform: translateY(15px);
  }

  &__label-text {
    transition: inherit;
    transform-origin: inherit;
  }

  &__label--label-top {
    transform: translateY(3px);
  }

  & &__label--label-top &__label-text {
    transform: scale(0.75);
    color: var(--wds-color-black-300, var(--wsr-color-D30, #595D70));
  }

  & &__label--label-top#{&}__label--top-label-gray &__label-text {
    color: var(--wds-color-black-400, var(--wsr-color-D40, #868AA5));
  }

  & &__label--disabled &__label-text {
    color: var(--wds-color-black-400, var(--wsr-color-D40, #868AA5));
  }

  &#{&} &__input-container {
    height: 52px;
  }

  &__input-container .input__input {
    padding: 18px 0 0 4px !important;
  }

  &__input-container :global([data-hook='input-menu-arrow']) {
    padding: 14px 6px 14px 9px !important;
  }

  @media (prefers-reduced-motion) {
    &__label,
    &__label-text {
      transition: none;
    }
  }
}