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

.np-flow-navigation {
  width: 100%;
  // This prevents jumping when border disappears.
  min-height: 97px;

  &--border-bottom {
    // This is the natural height of FlowNavigation when the Avatar is displayed.
    min-height: 96px;
    border-bottom: 1px solid var(--color-border-neutral);
  }

  &__content {
    width: 100%;
    min-width: 320px;
    max-width: 1164px;
  }

  &__stepper {
    .p-b-0;
    .p-x-0;
  }

  &--xs-max {
    .np-flow-navigation__stepper {
      .tw-stepper-steps {
        display: none;
      }

      .progress {
        margin-bottom: 0;
      }
    }

    .np-animated-label {
      height: auto;

      .tw-icon-chevron-down {
        margin-left: var(--size-4);
      }
    }
  }

  &--sm {
    .np-flow-navigation__stepper {
      .p-x-3;

      min-height: 56px;
    }
  }

  &--lg {
    .np-flow-navigation__stepper {
      max-width: 562px;
    }

    .np-flow-header__left,
    .np-flow-header__right {
      width: 180px;
    }
  }

  &--hidden {
    visibility: hidden;
  }

  .np-theme-personal--forest-green &,
  .np-theme-personal--bright-green &,
  .np-theme-personal--dark & {
    // TODO alexnataliatw: Add class to logo to have more control
    .np-flow-header__left path {
      fill: var(--color-interactive-primary);
    }
  }
}