import { css } from "lit";
const componentStyle = css`
          * {
            -webkit-tap-highlight-color: transparent;
          }
.sequence-connector .line {
    position: relative;
  }
.direction-horizontal :is(.sequence-connector .line) {
      width: 24px;
    }
.direction-vertical :is(.sequence-connector .line) {
      height: 24px;
    }
.state-not-started :is(.sequence-connector .line) {
      background-color: var(--element-disabled-color);
    }
.type-small :is(.direction-horizontal :is(.state-not-started :is(.sequence-connector .line))),.type-medium :is(.direction-horizontal :is(.state-not-started :is(.sequence-connector .line))) {
          height: 1.5px;
        }
.type-large :is(.direction-horizontal :is(.state-not-started :is(.sequence-connector .line))) {
          height: 2px;
        }
.type-small :is(.direction-vertical :is(.state-not-started :is(.sequence-connector .line))),.type-medium :is(.direction-vertical :is(.state-not-started :is(.sequence-connector .line))) {
          width: 1.5px;
        }
.type-large :is(.direction-vertical :is(.state-not-started :is(.sequence-connector .line))) {
          width: 2px;
        }
.state-loading :is(.sequence-connector .line) {
      background-color: var(--base-blue-200);
    }
.state-completed :is(.sequence-connector .line) {
      background-color: var(--element-neutral-enhanced-color);
    }
.type-small :is(.direction-horizontal :is(:is(.state-loading,.state-completed) :is(.sequence-connector .line))) {
          height: 2px;
        }
.type-medium :is(.direction-horizontal :is(:is(.state-loading,.state-completed) :is(.sequence-connector .line))) {
          height: 3px;
        }
.type-large :is(.direction-horizontal :is(:is(.state-loading,.state-completed) :is(.sequence-connector .line))) {
          height: 4px;
        }
.type-small :is(.direction-vertical :is(:is(.state-loading,.state-completed) :is(.sequence-connector .line))) {
          width: 2px;
        }
.type-medium :is(.direction-vertical :is(:is(.state-loading,.state-completed) :is(.sequence-connector .line))) {
          width: 3px;
        }
.type-large :is(.direction-vertical :is(:is(.state-loading,.state-completed) :is(.sequence-connector .line))) {
          width: 4px;
        }
.state-steps-between :is(.sequence-connector .line) {
      background-image: radial-gradient(
        circle,
        var(--element-disabled-color) 0,
        var(--element-disabled-color) 1px,
        transparent 1.5px
      );
    }
.type-large :is(.state-steps-between :is(.sequence-connector .line)) {
        background-image: radial-gradient(
          circle,
          var(--element-disabled-color) 0,
          var(--element-disabled-color) 1.5px,
          transparent 2px
        );
      }
.direction-horizontal :is(.state-steps-between :is(.sequence-connector .line)) {
        height: 2px;
        background-size: 4px 2px;
        background-position: -2px center;
      }
.type-large :is(.direction-horizontal :is(.state-steps-between :is(.sequence-connector .line))) {
          height: 3px;
          background-size: 6px 3px;
          background-position: -3px center;
        }
.direction-vertical :is(.state-steps-between :is(.sequence-connector .line)) {
        width: 2px;
        background-size: 2px 4px;
        background-position: center -2px;
      }
.type-large :is(.direction-vertical :is(.state-steps-between :is(.sequence-connector .line))) {
          width: 3px;
          background-size: 3px 6px;
          background-position: center -3px;
        }
.sequence-connector .loading-bar {
    position: absolute;
    inset: 0;
    background: var(--element-neutral-enhanced-color);
  }
.direction-horizontal :is(.sequence-connector .loading-bar) {
      width: var(--loading-bar-percent, 66%);
    }
.direction-vertical :is(.sequence-connector .loading-bar) {
      height: var(--loading-bar-percent, 66%);
    }
`;
export {
  componentStyle as default
};
//# sourceMappingURL=sequence-connector.css.js.map
