@use '../../styles/variables.scss' as vars;

.setup-ol {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-top: 1.5rem;
  .setup-li {
    margin-bottom: 16px;
    position: relative;
    margin-bottom: 0;

    .setup-li-disabled {
      .item-bar {
        background-color: rgb(203 213 225 / 50%);
      }
      .item-title {
        h4 {
          color: vars.$color-muted;
        }
        .item-icon {
          border-color: rgb(203 213 225);
          .item-icon-dot {
            background: rgb(203 213 225);
          }
        }
      }
      .item-content {
        color: vars.$color-muted;
      }
      pointer-events: none;
    }
    .item-bar {
      position: absolute;
      left: 8px;
      height: 100%;
      background-color: rgb(203 213 225);
      width: 2px;
      z-index: 1;
    }

    .item-title {
      display: flex;
      h4 {
        margin: 0;
        margin-left: calc(1rem - 2px);
      }
      .item-icon {
        width: 1rem;
        height: 1rem;
        border: 1px solid vars.$primary-color;
        border-radius: 50%;
        background: #fff;
        z-index: 2;
        .item-icon-dot {
          width: 0.5rem;
          height: 0.5rem;
          background: vars.$primary-color;
          border-radius: 50%;
          margin: calc(0.25rem);
        }
      }
    }

    .item-content {
      padding-left: 2rem;
      padding-bottom: 2.5rem;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}