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

:host {
  display: block;
}

/* Sequence item mirrors button tokens so its spacing matches the step component. */

.sequence-item__wrapper {
  display: flex;
  gap: var(--ui-components-button-label-spacing);
  color: var(--element-active-color);
}

.sequence-item__wrapper.orientation-vertical.label-small {
    gap: 4px;
  }

.sequence-item__wrapper.step-size-large {
    min-width: 65px;
  }

/* === Orientation Variants === */

.sequence-item__wrapper.orientation-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

.sequence-item__wrapper.orientation-vertical {
    display: grid;
    grid-template-columns: auto auto 1fr;
    max-width: 188px;
    width: 188px;
  }

.sequence-item__wrapper.orientation-vertical.label-small .title-row,.sequence-item__wrapper.orientation-vertical.label-small .meta-row {
        padding: var(--global-size-spacing-target-padding);
      }

.sequence-item__wrapper.orientation-vertical.label-regular .title-row,.sequence-item__wrapper.orientation-vertical.label-regular .meta-row {
        padding: 4px 0;
      }

.sequence-item__wrapper.orientation-vertical.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-regular.sequence-item__wrapper--has-description {
      max-width: 188px;
      width: 188px;
    }

:is(.sequence-item__wrapper.orientation-vertical.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-regular.sequence-item__wrapper--has-description) .title-row,:is(.sequence-item__wrapper.orientation-vertical.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-regular.sequence-item__wrapper--has-description) .meta-row {
        padding: var(
            --global-size-spacing-list-item-menu-padding-horizonal-list-item
          )
          0;
      }

.label-multi-line:is(.sequence-item__wrapper.orientation-vertical.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-regular.sequence-item__wrapper--has-description) .title-row,.label-multi-line:is(.sequence-item__wrapper.orientation-vertical.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-regular.sequence-item__wrapper--has-description) .meta-row {
          padding: 14px 0;
        }

.sequence-item__wrapper.orientation-vertical .meta-row {
      order: 1;
    }

.sequence-item__wrapper.orientation-vertical .title-row {
      order: 3;
    }

.sequence-item__wrapper.orientation-vertical .step-wrapper {
      order: 2;
      width: auto;
      height: 100%;
      max-height: 100%;
    }

.sequence-item__wrapper.orientation-vertical .step-wrapper ::slotted(obc-sequence-step),.sequence-item__wrapper.orientation-vertical .step-wrapper obc-sequence-step {
      display: flex;
      align-self: stretch;
      flex: 1;
      height: 100%;
      max-height: 100%;
    }

.sequence-item__wrapper.orientation-vertical .title,.sequence-item__wrapper.orientation-vertical .subtitle {
      text-align: left;
    }

.sequence-item__wrapper.orientation-vertical .description {
      margin-bottom: 0;
      margin-top: var(--global-size-spacing-target-padding);
    }

/* === Step wrapper & content layout === */

.sequence-item__wrapper .content {
    align-items: center;
    text-align: center;
    padding: 0 var(--global-size-spacing-target-padding);
  }

.sequence-item__wrapper .step-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0;
  }

.sequence-item__wrapper .content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
  }

.sequence-item__wrapper .step-wrapper ::slotted(obc-sequence-step),.sequence-item__wrapper .step-wrapper obc-sequence-step {
    display: inline-flex;
    flex: 1;
  }

.sequence-item__wrapper .title-row {
    display: flex;
    gap: var(--global-size-spacing-list-item-menu-padding-horizonal-list-item);
    justify-content: space-between;
    align-items: flex-start;
  }

.sequence-item__wrapper .title-block {
    flex: 1;
    min-width: 0;
  }

/* === Typography === */

.sequence-item__wrapper .title,.sequence-item__wrapper .subtitle {
    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;
    text-align: center;
    line-height: 20px;
    max-width: 100%;
    white-space: normal;
  }

.sequence-item__wrapper .title {
    color: var(--element-active-color);
  }

.sequence-item__wrapper .subtitle {
    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;
    line-height: 20px;
    color: var(--element-inactive-color);
  }

.sequence-item__wrapper .description {
    font-family: var(--global-typography-font-family);
    font-weight: var(--global-typography-instrument-unit-font-weight);
    font-size: var(--global-typography-instrument-unit-font-size);
    line-height: var(--global-typography-instrument-unit-line-height);
    font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
    color: var(--element-inactive-color);
    margin-bottom: 0;
  }

.sequence-item__wrapper .meta-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--element-inactive-color);
    text-align: center;
  }

.sequence-item__wrapper .meta {
    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;
    display: flex;
    flex-direction: column;
    gap: var(--alert-components-badge-label-spacing);
  }

/* === Label Variants === */

.sequence-item__wrapper.label-multi-line .title,.sequence-item__wrapper.label-multi-line .subtitle,.sequence-item__wrapper.label-small .title,.sequence-item__wrapper.label-small .subtitle {
    white-space: normal;
    max-width: 100%;
  }

.sequence-item__wrapper.orientation-horizontal .title-row {
    width: 100%;
    max-width: 100%;
  }

/* === State Overrides === */

.sequence-item__wrapper.state-active .title {
      font-weight: 570;
    }

.sequence-item__wrapper.state-active .subtitle,.sequence-item__wrapper.state-active .meta-row,.sequence-item__wrapper.state-active .description {
      color: var(--element-active-color);
    }

.sequence-item__wrapper.state-active.label-small .title {
      font-weight: 570;
    }

.sequence-item__wrapper.state-active.label-small .title,.sequence-item__wrapper.state-active.label-small .subtitle {
        font-family: var(--global-typography-font-family);
        font-weight: var(
    --global-typography-instrument-value-small-font-weight-active
  );
        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;
      }

/* === Small Label Adjustments === */

.sequence-item__wrapper.label-small .title,.sequence-item__wrapper.label-small .subtitle {
      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;
    }

.sequence-item__wrapper.label-small .meta-row {
      font-family: var(--font-family-main);
      font-weight: var(--font-weight-regular);
      font-size: var(--global-typography-ui-label-font-size);
      line-height: var(--global-typography-ui-label-line-height);
      font-feature-settings:
    "liga" off,
    "clig" off,
    "ss04" on;
      font-size: 11.5px;
      line-height: 16px;
    }

.sequence-item__wrapper.label-small .content {
      gap: var(--global-size-spacing-target-padding);
    }

.sequence-item__wrapper.label-regular .meta-row {
      width: fit-content;
      max-width: 30px;
    }

.sequence-item__wrapper.label-regular .meta {
      font-size: 11.5px;
      line-height: 16px;
      font-weight: 370;
    }

.sequence-item__wrapper.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-regular.sequence-item__wrapper--has-description {
    max-width: 146px;
    width: 146px;
  }

:is(.sequence-item__wrapper.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-regular.sequence-item__wrapper--has-description) .title,:is(.sequence-item__wrapper.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-regular.sequence-item__wrapper--has-description) .subtitle,:is(.sequence-item__wrapper.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-regular.sequence-item__wrapper--has-description) .description {
      text-align: left;
    }

:is(.sequence-item__wrapper.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.label-regular.sequence-item__wrapper--has-description) .meta-row {
      align-self: flex-start;
    }
`;
export {
  style as default
};
//# sourceMappingURL=sequence-item.css.js.map
