@import (reference) "./../styles/variables/neptune-tokens.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";
@import (reference) "./../styles/less/ring.less";

.tw-stepper {
  padding-bottom: 24px;
  width: 100%;

  @media only screen and (--screen-xs-max) {
    padding-bottom: 0;
  }

  &__step {
    position: absolute;
    top: 0;
    list-style-type: none;

    &--active {
      .tw-stepper__step-label {
        cursor: default;
        color: var(--color-content-primary);
      }
    }

    &--clickable .tw-stepper__step-label {
      color: var(--color-content-accent);
      transition: color 0.15s ease-in-out;
      line-height: 0;
      border-radius: 2px;

      .np-theme-personal & {
        color: var(--color-content-secondary);
        top: 0;
      }
    }

    &--has-tooltip {
      cursor: pointer;
    }

    @media screen and (--screen-sm) and (--screen-md-max) {
      &:first-child .tooltip-inner {
        transform: translateX(~"calc(50% - 32px)");
      }

      &:last-child .tooltip-inner {
        transform: translateX(~"calc(-50% + 32px)");
      }
    }
  }

  &__step-label {
    position: absolute;
    top: 0;
    color: var(--color-content-secondary);
    transition: color 0.6s ease-in-out;
    white-space: nowrap;
    .translateX(-50%);
  }

  & .tooltip {
    top: 24px !important;
    white-space: nowrap;

    & .tooltip-inner {
      max-width: 100%;
    }
  }

  & .tw-tooltip-container {
    display: inline-block;
  }
}

.tw-stepper-steps {
  position: relative;
  .padding-shorthand(0);
}

.progress-bar {
  -webkit-backface-visibility: hidden;
  background-color: var(--color-interactive-primary);
  transition: width 0.6s ease-in-out;
  will-change: width;
}