// cli Version 1.0.0
// Version 1.0.2
.dry-progressnavigation {
  display: flex;
  position: relative;

  &.horizontal {
    flex-direction: row;
  }

  &.vertical {
    flex-direction: column;
  }

  .steps-container {
    display: flex;
    z-index: 1;

    &.horizontal {
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
    }

    &.vertical {
      flex-direction: column;
    }

    .step {
      cursor: pointer;
      display: flex;
      align-items: center;
      position: relative;
      padding: 10px;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #007bff;
        transition: width 0.3s ease;
      }

      &.active {
        .title,
        .text {
          color: #007bff;
        }

        &::after {
          width: 100%;
        }
      }

      // .icon-container {
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      //   margin-right: 10px;

      //   .default-icon {
      //     width: 24px;
      //     height: 24px;
      //     border-radius: 50%;
      //     background-color: #ddd;
      //     display: flex;
      //     justify-content: center;
      //     align-items: center;
      //     color: #007bff;
      //     transition: background-color 0.3s ease;

      //     &.filled {
      //       background-color: #007bff;
      //       color: #fff;
      //     }
      //   }
      // }

      .text-container {
        .title {
          font-size: 16px;
          margin-bottom: 5px;
        }
      }
    }
  }
}

// ========================================
// Media Queries
// ========================================
// Adjusting desktop screens
@media (min-width: 1024px) {
}

// Adjusting for tablet screens (between small tablets and desktops)
@media (max-width: 1023px) {
}

// Adjusting for smaller screens (small tablets and mobile)
@media (max-width: 768px) {
}

// Adjusting for smaller screens (mobile)
@media (max-width: 480px) {
}