import { css } from "lit";
const style = css`
          * {
            -webkit-tap-highlight-color: transparent;
          }

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  max-width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  user-select: none;
}

.body,
.node {
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-loading.style-point .node {
  position: relative;
}

.value-loading.style-point .loading-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.value-loading.style-point .content {
  position: relative;
  z-index: 1;
}

:host([variant="toolbar-add"]) {
  margin-left: var(--ui-components-button-label-spacing, 8px);
}

:host([variant="toolbar-add"]) .wrapper.type-large .visible-wrapper {
  background-color: var(--normal-enabled-background-color, transparent);
  border-color: var(--normal-enabled-border-color, currentColor);
}

:host([variant="toolbar-add"]) .wrapper.type-large:hover .visible-wrapper {
  background-color: var(--normal-hover-background-color, transparent);
  border-color: var(--normal-hover-border-color, currentColor);
}

:host([variant="toolbar-add"]) .content {
  display: flex;
  padding: 0;
}

:host([variant="toolbar-add"])
  .wrapper.type-large
  .visible-wrapper
  .node
  .content {
  padding: 0;
}

:host([variant="toolbar-condensed-icon"]) .wrapper.type-large .visible-wrapper {
  background-color: transparent;
  border-color: transparent;
}

:host([variant="toolbar-condensed-icon"])
  .wrapper.type-large:hover
  .visible-wrapper {
  background-color: var(--normal-hover-background-color, transparent);
  border-color: transparent;
}

:host([variant="toolbar-condensed-icon"]) .content {
  padding: 0;
}

:host([variant="toolbar-condensed-icon"])
  .wrapper.type-large
  .visible-wrapper
  .node
  .content {
  padding: 0;
}

.connector {
  width: 5px;
  height: 2px;
  flex: 1;
  background-color: var(--element-disabled-color);
}

.type-small .connector {
    height: 1.5px;
  }

.connector-vertical .connector {
    width: 2px;
    height: 5px;
    min-height: 5px;
  }

.type-small :is(.connector-vertical .connector) {
      width: 1.5px;
    }

.style-connector .connector {
    display: block;
  }

.type-small :is(.style-connector .connector) {
      width: 8px;
    }

.type-large .connector {
    width: 7px;
  }

.connector-vertical :is(.type-large .connector) {
      min-height: 7px;
      height: 7px;
      width: 2px;
    }

.value-loading .connector.input,.value-next .connector.input,.value-active .connector.input,.value-completed .connector.input {
      background-color: var(--element-neutral-enhanced-color);
    }

.label-multi-line.connector-horizontal .connector.input {
      max-width: 8px;
    }

.label-multi-line.connector-vertical .connector.input {
      max-height: 20px;
    }

.connector.output {
    z-index: -1;
  }

.value-completed .connector.output {
      background-color: var(--element-neutral-enhanced-color);
    }

.type-small .visible-wrapper {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 1000px;
    border: 2px solid var(--element-disabled-color);
  }

.style-point :is(.type-small .visible-wrapper) {
      width: 8px;
      height: 8px;
    }

.value-not-started :is(.type-small .visible-wrapper) {
      border-width: 1.5px;
    }

.value-regular :is(.type-small .visible-wrapper) {
      border-color: var(--element-inactive-color);
      border-width: 1.5px;
    }

.value-loading :is(.type-small .visible-wrapper) {
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.value-next :is(.type-small .visible-wrapper) {
      border-color: var(--element-neutral-enhanced-color);
    }

.value-active :is(.type-small .visible-wrapper) {
      border-color: var(--element-neutral-enhanced-color);
    }

.value-completed :is(.type-small .visible-wrapper) {
      border-color: var(--element-neutral-enhanced-color);
      background-color: var(--element-neutral-enhanced-color);
      color: var(--on-selected-active-color);
    }

.type-medium .visible-wrapper {
    height: 24px;
    min-width: 24px;
    padding: 0 4px;
    flex-shrink: 0;
    border-radius: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.value-loading.style-point :is(.type-medium .visible-wrapper) {
      width: 32px;
      height: 32px;
    }

:is(.type-medium .visible-wrapper) .node {
      display: flex;
      align-items: center;
      justify-content: center;
    }

:is(:is(.type-medium .visible-wrapper) .node) .state-icon {
        width: 16px;
        height: 16px;
      }

:is(:is(.type-medium .visible-wrapper) .node) .state-icon--spinner {
        width: auto;
        height: auto;
      }

:is(:is(.type-medium .visible-wrapper) .node) .content {
        font-family: var(--global-typography-font-family);
        font-weight: var(
    --global-typography-instrument-value-small-font-weight-regular
  );
        font-size: var(--global-typography-instrument-value-small-font-size);
        line-height: var(--global-typography-instrument-value-small-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
        padding: 0 4px;
      }

:is(.value-not-started :is(.type-medium .visible-wrapper)) {
            border-color: var(--indent-enabled-border-color);
            background-color: var(--indent-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--indent-enabled-border-color);
            --base-background-color: var(--indent-enabled-background-color);
}

.value-not-started :is(.type-medium .visible-wrapper) {
      color: var(--element-neutral-color);
    }

:is(.value-not-started :is(.type-medium .visible-wrapper)) .state-icon {
        color: var(--element-inactive-color);
      }

:is(.value-regular :is(.type-medium .visible-wrapper),.value-loading :is(.type-medium .visible-wrapper)) {
            border-color: var(--normal-enabled-border-color);
            background-color: var(--normal-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--normal-enabled-border-color);
            --base-background-color: var(--normal-enabled-background-color);
}

.value-regular :is(.type-medium .visible-wrapper),.value-loading :is(.type-medium .visible-wrapper) {
      color: var(--on-normal-active-color);
    }

:is(.value-regular :is(.type-medium .visible-wrapper),.value-loading :is(.type-medium .visible-wrapper)) .state-icon {
        color: var(--on-normal-neutral-color);
      }

.value-loading.style-point :is(.type-medium .visible-wrapper) {
      border: none;
    }

:is(.value-loading :is(.type-medium .visible-wrapper),.value-next :is(.type-medium .visible-wrapper),.value-active :is(.type-medium .visible-wrapper),.value-completed :is(.type-medium .visible-wrapper)) .content {
        font-family: var(--global-typography-font-family);
        font-weight: var(--global-typography-instrument-label-font-weight);
        font-size: var(--global-typography-instrument-label-font-size);
        line-height: var(--global-typography-instrument-label-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      }

:is(.value-next :is(.type-medium .visible-wrapper),.value-active :is(.type-medium .visible-wrapper)) {
            border-color: var(--amplified-enabled-border-color);
            background-color: var(--amplified-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--amplified-enabled-border-color);
            --base-background-color: var(--amplified-enabled-background-color);
}

.value-next :is(.type-medium .visible-wrapper),.value-active :is(.type-medium .visible-wrapper) {
      color: var(--on-amplified-active-color);
    }

:is(.value-next :is(.type-medium .visible-wrapper),.value-active :is(.type-medium .visible-wrapper)) .state-icon {
        color: var(--on-amplified-neutral-color);
      }

.value-active :is(.type-medium .visible-wrapper) {
      outline: 3px solid var(--element-neutral-enhanced-color);
      border: none;
    }

.value-completed :is(.type-medium .visible-wrapper) {
      border-color: var(--element-neutral-enhanced-color);
      background-color: var(--element-neutral-enhanced-color);
      color: var(--on-selected-active-color);
    }

button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wrapper.type-large {
  min-width: 48px;
  /* height: 48px; */
}

.connector-horizontal .wrapper.type-large {
    height: 48px;
  }

.wrapper.type-large.style-point .visible-wrapper {
    padding: 0;
  }

.wrapper.type-large .visible-wrapper {
    height: 36px;
    min-width: 36px;
    border-radius: 1000px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

:is(.wrapper.type-large .visible-wrapper) .node {
      display: flex;
      align-items: center;
      justify-content: center;
    }

:is(:is(.wrapper.type-large .visible-wrapper) .node) .state-icon {
        width: 24px;
        height: 24px;
      }

:is(:is(.wrapper.type-large .visible-wrapper) .node) .state-icon--spinner {
        width: auto;
        height: auto;
      }

:is(:is(.wrapper.type-large .visible-wrapper) .node) .content {
        font-family: var(--font-family-main);
        font-weight: var(--global-typography-ui-body-font-weight);
        font-size: var(--global-typography-ui-body-font-size);
        line-height: var(--global-typography-ui-body-line-height);
        font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
        padding: 0 8px;
      }

.value-loading.style-point :is(.wrapper.type-large .visible-wrapper) {
      border: none;
      width: 48px;
      height: 48px;
    }

.wrapper.type-large.value-not-started {
            cursor: pointer;
}

.wrapper.type-large.value-not-started:focus {
            outline: none;
}

.wrapper.type-large.value-not-started .visible-wrapper {
            border-color: var(--indent-enabled-border-color);
            background-color: var(--indent-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--indent-enabled-border-color);
            --base-background-color: var(--indent-enabled-background-color);
}

.wrapper.type-large.value-not-started.activated .visible-wrapper {
            border-color: var(--indent-activated-border-color);
            background-color: var(--indent-activated-background-color);
            --base-border-color: var(--indent-activated-border-color);
            --base-background-color: var(--indent-activated-background-color);
}

@media (hover:hover) {

.wrapper.type-large.value-not-started:hover .visible-wrapper {
                        border-color: color-mix(in srgb, var(--indent-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--indent-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

.wrapper.type-large.value-not-started:active .visible-wrapper {
            border-color: var(--indent-pressed-border-color);
            background-color: var(--indent-pressed-background-color);
}

.wrapper.type-large.value-not-started:focus-visible .visible-wrapper {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

.wrapper.type-large.value-not-started:disabled .visible-wrapper {
            border-color: var(--indent-disabled-border-color);
            background-color: var(--indent-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-indent-disabled-color) !important;
}

.wrapper.type-large.value-not-started.disabled .visible-wrapper {
            border-color: var(--indent-disabled-border-color);
            background-color: var(--indent-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-indent-disabled-color) !important;
}

.wrapper.type-large.value-not-started:disabled {
            cursor: not-allowed;
}

.wrapper.type-large.value-not-started.disabled {
            cursor: not-allowed;
}

.wrapper.type-large.value-not-started {
    color: var(--element-neutral-color);
}

.wrapper.type-large.value-not-started .state-icon {
      color: var(--element-inactive-color);
    }

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading) {
            cursor: pointer;
}

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading):focus {
            outline: none;
}

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading) .visible-wrapper {
            border-color: var(--normal-enabled-border-color);
            background-color: var(--normal-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--normal-enabled-border-color);
            --base-background-color: var(--normal-enabled-background-color);
}

.activated:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading) .visible-wrapper {
            border-color: var(--normal-activated-border-color);
            background-color: var(--normal-activated-background-color);
            --base-border-color: var(--normal-activated-border-color);
            --base-background-color: var(--normal-activated-background-color);
}

@media (hover:hover) {

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading):hover .visible-wrapper {
                        border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading):active .visible-wrapper {
            border-color: var(--normal-pressed-border-color);
            background-color: var(--normal-pressed-background-color);
}

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading):focus-visible .visible-wrapper {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading):disabled .visible-wrapper {
            border-color: var(--normal-disabled-border-color);
            background-color: var(--normal-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-normal-disabled-color) !important;
}

.disabled:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading) .visible-wrapper {
            border-color: var(--normal-disabled-border-color);
            background-color: var(--normal-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-normal-disabled-color) !important;
}

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading):disabled {
            cursor: not-allowed;
}

.disabled:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading) {
            cursor: not-allowed;
}

.wrapper.type-large.value-regular,.wrapper.type-large.value-loading {
    color: var(--on-normal-active-color);
  }

:is(.wrapper.type-large.value-regular,.wrapper.type-large.value-loading) .state-icon {
      color: var(--on-normal-neutral-color);
    }

:is(.wrapper.type-large.value-loading,.wrapper.type-large.value-next,.wrapper.type-large.value-active,.wrapper.type-large.value-completed) .content {
      font-family: var(--global-typography-font-family);
      font-weight: var(--global-typography-instrument-label-font-weight);
      font-size: var(--global-typography-instrument-label-font-size);
      line-height: var(--global-typography-instrument-label-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    }

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active) {
            cursor: pointer;
}

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active):focus {
            outline: none;
}

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active) .visible-wrapper {
            border-color: var(--amplified-enabled-border-color);
            background-color: var(--amplified-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--amplified-enabled-border-color);
            --base-background-color: var(--amplified-enabled-background-color);
}

.activated:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active) .visible-wrapper {
            border-color: var(--amplified-activated-border-color);
            background-color: var(--amplified-activated-background-color);
            --base-border-color: var(--amplified-activated-border-color);
            --base-background-color: var(--amplified-activated-background-color);
}

@media (hover:hover) {

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active):hover .visible-wrapper {
                        border-color: color-mix(in srgb, var(--amplified-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--amplified-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active):active .visible-wrapper {
            border-color: var(--amplified-pressed-border-color);
            background-color: var(--amplified-pressed-background-color);
}

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active):focus-visible .visible-wrapper {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active):disabled .visible-wrapper {
            border-color: var(--amplified-disabled-border-color);
            background-color: var(--amplified-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-amplified-disabled-color) !important;
}

.disabled:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active) .visible-wrapper {
            border-color: var(--amplified-disabled-border-color);
            background-color: var(--amplified-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-amplified-disabled-color) !important;
}

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active):disabled {
            cursor: not-allowed;
}

.disabled:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active) {
            cursor: not-allowed;
}

.wrapper.type-large.value-next,.wrapper.type-large.value-active {
    color: var(--on-amplified-active-color);
  }

:is(.wrapper.type-large.value-next,.wrapper.type-large.value-active) .state-icon {
      color: var(--on-amplified-neutral-color);
    }

.wrapper.type-large.value-active .visible-wrapper {
    outline: 3px solid var(--element-neutral-enhanced-color);
    border: none;
  }

.wrapper.type-large.value-completed {
            cursor: pointer;
}

.wrapper.type-large.value-completed:focus {
            outline: none;
}

.wrapper.type-large.value-completed .visible-wrapper {
            border-color: var(--selected-enabled-border-color);
            background-color: var(--selected-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--selected-enabled-border-color);
            --base-background-color: var(--selected-enabled-background-color);
}

.wrapper.type-large.value-completed.activated .visible-wrapper {
            border-color: var(--selected-activated-border-color);
            background-color: var(--selected-activated-background-color);
            --base-border-color: var(--selected-activated-border-color);
            --base-background-color: var(--selected-activated-background-color);
}

@media (hover:hover) {

.wrapper.type-large.value-completed:hover .visible-wrapper {
                        border-color: color-mix(in srgb, var(--selected-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--selected-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

.wrapper.type-large.value-completed:active .visible-wrapper {
            border-color: var(--selected-pressed-border-color);
            background-color: var(--selected-pressed-background-color);
}

.wrapper.type-large.value-completed:focus-visible .visible-wrapper {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

.wrapper.type-large.value-completed:disabled .visible-wrapper {
            border-color: var(--selected-disabled-border-color);
            background-color: var(--selected-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-selected-disabled-color) !important;
}

.wrapper.type-large.value-completed.disabled .visible-wrapper {
            border-color: var(--selected-disabled-border-color);
            background-color: var(--selected-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-selected-disabled-color) !important;
}

.wrapper.type-large.value-completed:disabled {
            cursor: not-allowed;
}

.wrapper.type-large.value-completed.disabled {
            cursor: not-allowed;
}

.wrapper.type-large.value-completed {
    color: var(--on-selected-active-color);
}

.wrapper.connector-vertical {
  flex-direction: column;
}

.wrapper.style-connector .body {
    display: flex;
  }

.connector-vertical :is(.wrapper.style-connector .body) {
      flex-direction: column;
    }

.connector-vertical :is(.wrapper.style-connector.type-small .connector) {
      width: 2px;
      min-height: 8px;
    }

.value-not-started :is(.wrapper.style-connector.type-small .connector),.value-regular :is(.wrapper.style-connector.type-small .connector) {
      height: 1.5px;
    }

.connector-vertical :is(.value-not-started :is(.wrapper.style-connector.type-small .connector),.value-regular :is(.wrapper.style-connector.type-small .connector)) {
        width: 1.5px;
      }

.value-loading :is(.wrapper.style-connector.type-small .connector),.value-next :is(.wrapper.style-connector.type-small .connector),.value-active :is(.wrapper.style-connector.type-small .connector) {
      background-color: var(--element-neutral-enhanced-color);
      height: 2px;
    }

.wrapper.style-connector.type-medium .connector {
    width: 16px;
  }

.connector-vertical :is(.wrapper.style-connector.type-medium .connector) {
      min-height: 16px;
      width: 1.5px;
    }

.value-not-started :is(.wrapper.style-connector.type-medium .connector),.value-regular :is(.wrapper.style-connector.type-medium .connector),.value-loading :is(.wrapper.style-connector.type-medium .connector) {
      height: 1.5px;
    }

.value-loading :is(.wrapper.style-connector.type-medium .connector) {
      background-color: var(--element-disabled-color);
    }

.value-next :is(.wrapper.style-connector.type-medium .connector) {
      background-color: var(--base-blue-200);
    }

.value-active :is(.wrapper.style-connector.type-medium .connector) {
      background-color: var(--element-neutral-enhanced-color);
    }

.value-next :is(.wrapper.style-connector.type-medium .connector),.value-active :is(.wrapper.style-connector.type-medium .connector),.value-completed :is(.wrapper.style-connector.type-medium .connector) {
      height: 3px;
    }

.connector-vertical :is(.value-next :is(.wrapper.style-connector.type-medium .connector),.value-active :is(.wrapper.style-connector.type-medium .connector),.value-completed :is(.wrapper.style-connector.type-medium .connector)) {
        width: 3px;
      }

.wrapper.style-connector.type-large .connector {
    width: 24px;
  }

.connector-vertical :is(.wrapper.style-connector.type-large .connector) {
      min-height: 24px;
      width: 1.5px;
    }

.value-loading :is(.wrapper.style-connector.type-large .connector) {
      background-color: var(--element-disabled-color);
    }

.value-active :is(.wrapper.style-connector.type-large .connector),.value-next .input:is(.wrapper.style-connector.type-large .connector) {
      background-color: var(--element-neutral-enhanced-color);
    }

.value-next .output:is(.wrapper.style-connector.type-large .connector) {
      background-color: var(--base-blue-200);
    }

.value-next :is(.wrapper.style-connector.type-large .connector),.value-active :is(.wrapper.style-connector.type-large .connector),.value-completed :is(.wrapper.style-connector.type-large .connector) {
      height: 3px;
    }

.connector-vertical :is(.value-next :is(.wrapper.style-connector.type-large .connector),.value-active :is(.wrapper.style-connector.type-large .connector),.value-completed :is(.wrapper.style-connector.type-large .connector)) {
        width: 3px;
      }

@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:host(.condensed-label) .wrapper,
:host(.condensed-label) button {
  cursor: default;
  pointer-events: none;
}

:host([variant="toolbar-prev"]) .wrapper.type-large .visible-wrapper {
  background-color: var(--normal-enabled-background-color, transparent);
  border-color: var(--normal-enabled-border-color, currentColor);
}

:host([variant="toolbar-prev"]) .wrapper.type-large:hover .visible-wrapper {
  background-color: var(--normal-hover-background-color, transparent);
  border-color: var(--normal-hover-border-color, currentColor);
}
`;
export {
  style as default
};
//# sourceMappingURL=sequence-step.css.js.map
