@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/index.less';

.pro-step-wrapper {
  padding-right: 48px;
}

.pro-step {
  position        : fixed;
  right           : 0;
  z-index         : 101;
  min-width       : 48px;
  min-height      : 48px;
  text-align      : center;
  background-color: var(--zaui-global-bg, #fff);
  cursor          : pointer;
  box-shadow      : -1px 0px 5px 0px var(--zaui-shadow, rgba(56,56,56,0.15));
  transition      : width .2s;
  overflow-x: hidden;
  overflow-y: auto;

  >.step-menu {
    display      : flex;
    align-items  : center;
    width        : 100%;
    height       : 48px;
    font-size    : var(--zaui-font-size-lg, 16px);
    border-bottom: 1px solid var(--zaui-line, #dddddd);

    >.menu-icon {
      font-size: var(--zaui-font-size-lg-title, 24px);
      fill     : var(--zaui-brand, #006AFF);

      >div {
        width          : 48px;
        height         : 24px;
        display        : flex;
        align-items    : center;
        justify-content: center;
      }
    }
  }

  .menu-content {
    overflow: hidden;

    &:hover {
      overflow-y: auto;
    }
  }

  .com-menu-item {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    width          : 100%;
    height         : 48px;
    padding-right  : var(--zaui-space-size-md, 24px);

    &:hover {
      background-color: rgba(185, 185, 189, 0.1);
    }

    &.current {
      background-color: var(--ant-primary-1, #e6f4ff);

      &:hover {
        background-color: var(--ant-primary-1, #e6f4ff);
      }
    }

    >.menu-item {
      display    : flex;
      align-items: center;

      >.menu-icon {
        display        : flex;
        align-items    : center;
        justify-content: center;
        width          : 48px;
        height         : 100%;

        >svg {
          fill: var(--zaui-brand, #006AFF);
        }

        >.dot {
          width        : 6px;
          height       : 6px;
          background   : var(--zaui-brand, #006AFF);
          border-radius: 3px;

          &.errored {
            background: #ff5050;
            fill      : #ff5050;
          }

          &.disabled {
            background: #939599;
            fill      : #939599;
          }
        }

        .dot-icon {
          display        : flex;
          align-items    : center;
          justify-content: center;
          font-size      : var(--zaui-font-size-sm, 12px);
          color          : #ffffff;
          width          : 18px;
          height         : 18px;
          background     : var(--zaui-brand, #006AFF);
          border-radius  : 9px;

          &.errored {
            background: #ff5050;
            fill      : #ff5050;
          }

          &.disabled {
            background: #939599;
            fill      : #939599;
          }
        }
      }

      >.menu-name {
        color: #0A0A0A;

        &.disabled {
          color: #626366;
        }
      }
    }

    >.checked-status {
      height: 18px;

      >svg {
        fill: var(--zaui-brand, #006AFF);
      }

      .errorDot {
        display        : flex;
        align-items    : center;
        justify-content: center;
        width          : 16px;
        height         : 16px;
        background     : rgba(255, 80, 80, 0.2);
        border-radius  : 8px;

        >span {
          color        : #ff5050;
          font-weight  : 600;
          font-size    : var(--aui-font-size-sm, 12px);
          border-radius: 8px;
        }
      }
    }
  }

  &.open {
    width: 200px;
  }

  &.closed {
    width: 48px;
  }
}