// Header settings

.c-header-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0;
  bottom: auto;
  background: #f4f5f9;
  z-index: 9;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: #dedeec;
  }
}

// Steps

.c {
  &-step {
    gap: 20px 24px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;

    &__line {
      transform: rotate(-180deg);
    }

    &.parent,
    &.import {
      .c-step-item {
        &.active {
          border-color: #5050ff;
          box-shadow: 0px 8px 16px 0px rgba(80, 80, 255, 0.1);
          color: #5050ff;
        }
      }
    }

    &.data-type {
      .c-step-item {
        &.active {
          background: linear-gradient(90deg, #5555FF 1.38%, #F3A2CF 100%);
          color: #fff;
          border: none;
        }
        &__title {
          font-size: 14px;
          font-weight: 600;
          line-height: 24px;
        }
      }
    }

    &.import {
      background: #F4F5F9;
    }

    &-wrapper {
      background: #fff;
      width: -webkit-fill-available;
    }

    &.parent {
      background: #fff;
      border-bottom: 1px solid#DEDEEC;
      width: -webkit-fill-available;

      .c-step-item {
        border: 1px solid #dedeec;
        &.active {
          background: #eef;
        }
      }
    }

    &.children {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: auto;
        bottom: 50%;
        transform: translate(0, 50%);
        width: 95%;
        height: 1px;
        background: #dedeec;
        z-index: 0;
      }

      .c-step-item {
        border: 1px solid #865dff;
        &.active {
          background: #f3efff;
          box-shadow: 0px 8px 16px 0px rgba(134, 93, 255, 0.08);
          color: #865dff;
        }

        &__number {
          color: #865dff;
        }
      }
    }

    &.import,
    &.data-type {
      .c-step-item {
        border-radius: 8px;
        border: 1px solid #dedeec;
        background: transparent;
        padding: 7px 12px;

        &__number {
          width: 24px;
          height: 24px;
        }
      }
    }

    &-item {
      display: flex;
      padding: 8px 12px;
      justify-content: center;
      align-items: center;
      gap: 6px;
      border-radius: 24px;
      background: #fff;
      cursor: pointer;
      z-index: 1;

      &__title,
      &__number {
        font-size: 12px;
        line-height: normal;
        font-weight: 500;
        flex-grow: 1;
        white-space: nowrap;
      }

      &__number {
        display: flex;
        justify-content: center;
        align-items: center;

        .ellipse {
          width: 12px;
          height: 12px;
          background: #dedeec;
          border-radius: 100%;
        }
      }

      &.active {
        .c-steps-item__title,
        .c-steps-item__number {
          color: #2a46ff;
          font-weight: 700;
        }

        .c-steps-item__number {
          border-color: #2a46ff;
        }
      }
    }

    .allowed {
      cursor: pointer;
    }

    .not-allowed {
      pointer-events: none;
      border-color: #dedeec;
      color: #40405b;
    }
  }
}
