nav {
  border-right: 1px solid var(--figma-color-border);
  overflow: hidden;
  position: relative;
  transition: width 500ms ease-in-out;
  width: 224px;

  .collapsed & {
    // overflow: hidden;
    width: 48px;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 40px 0 0;

    .collapsed & {
      padding-top: 8px;
    }
  }

  a {
    align-items: center;
    display: flex;
    height: 40px;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color 400ms ease, padding 600ms ease-in-out;

    &.active {
      background-color: #c5e5fb;

      .figma-dark & {
        background-color: #4f5c64;
      }
    }
  }
}

.container-flow-type {
  align-items: center;
  display: flex;
  height: 32px;
  padding: 12px 16px 0;
  position: absolute;
  width: 100%;

  .collapsed & {
    opacity: 0;
    position: relative;
  }
}

.flow-text {
  font-size: 11px;
  font-weight: 600;
  margin-left: 15px;
  text-transform: capitalize;
}

.step-marker {
  align-items: center;
  border: 1px solid var(--figma-color-text);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  margin-right: 16px;
  min-height: 16px;
  min-width: 16px;

  svg {
    display: none;
  }

  .active & .step-inner {
    background-color: var(--figma-color-text);
    border-radius: 2px;
    height: 4px;
    width: 4px;
  }

  .completed & {
    background-color: var(--figma-color-text);

    .step-inner {
      display: none;
    }

    svg {
      display: block;
    }
  }
}

.toggle-nav {
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 6px;
  position: absolute;
  right: 6px;
  top: 9px;
  transition: right 500ms ease-in-out;
  width: 26px;

  .collapsed & {
    right: 9px;
  }

  .view-condensed & {
    top: 4px;
  }
}

.step-label {
  white-space: nowrap;

  .collapsed & {
    white-space: nowrap;
  }
}

.container-progress {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 var(--spacing-sm) calc(var(--spacing-sm) * 1.25) var(--spacing-sm);
  white-space: nowrap;
  width: 100%;

  .collapsed & {
    justify-content: center;
  }
}

.progress-encourage {
  .collapsed & {
    display: none;
  }
}