@import (reference) "../../styles/less/addons/_spacing-utilities.less";
@import (reference) "../../styles/less/ring.less";

@transition-timing-function: ease-in-out;
@transition-duration: 0.3s;
@short-transition-duration: 0.15s;
@label-height: 24px;
@slide-length: 8px;

.np-animated-label {
  height: @label-height;
  overflow: hidden;
  position: relative;
  padding-top: 1px;

  > * {
    height: 0;
    opacity: 0;
    position: absolute;
    transform: translateX(-@slide-length);
    transition: all @transition-duration ease-in;
  }

  &--active {
    height: auto;
    opacity: 1;
    position: relative;
    top: auto;
    transform: translateX(0);
    transition: all @transition-duration ease-in @transition-duration;
  }

  &-option {
    border-radius: var(--radius-small);
    &:not(.disabled):hover,
    &:not(.disabled):focus-visible {
      .ring();
    }
  }
}