import { css } from 'lit';
import typographyStyles from '../../styles/m3/typography.module.js';
import dialogStyles from '../../styles/m3/dialog.module.js';
import surfaceStyles from '../../styles/m3/surface.module.js';
export default [
    typographyStyles,
    dialogStyles,
    surfaceStyles,
    css `
    :host {
      display: block;
    }

    .surface1,
    .surface2 {
      z-index: 0;
    }

    .editor-actions {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }

    .editor-actions > * {
      margin-right: 20px;
    }

    .empty-message {
      margin-top: 16px;
      text-align: center;
      color: var(--md-sys-color-on-surface);

      font-family: var(--md-sys-typescale-body-medium-font);
      font-weight: var(--md-sys-typescale-body-medium-weight);
      font-size: var(--md-sys-typescale-body-medium-size);
      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
      line-height: var(--md-sys-typescale-body-medium-height);
    }

    .container {
      display: flex;
    }

    .container > .editor {
      flex: 8;
    }

    .container > .options {
      flex: 4;
    }

    .action-group summary {
      font-family: var(--md-sys-typescale-label-medium-font);
      font-weight: var(--md-sys-typescale-label-medium-weight);
      font-size: var(--md-sys-typescale-label-medium-size);
      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
      line-height: var(--md-sys-typescale-label-medium-height);

      padding: 16px 0px;
      cursor: default;
    }

    .group-content {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
    }

    .group-content > ui-chip {
      margin: 4px;
    }

    .param-row {
      display: flex;
      align-items: start;
      min-height: 56px;
    }

    .param-row > :first-child,
    .param-row > :last-child {
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .action-tab,
    .param-row {
      background-color: var(--md-sys-color-surface);
      color: var(--md-sys-color-on-surface);
    }

    .steps {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-radius: 8px;
      padding-top: 8px;
      border: 1px transparent dashed;
    }

    .steps > * {
      margin-bottom: 8px;
    }

    .steps.dragover {
      background-color: var(--md-sys-color-surface);
      border-color: var(--md-sys-color-outline-variant);
      border-radius: 8px;
    }

    .step-unit {
      display: flex;
      align-items: center;
    }

    .step-pill {
      background-color: var(--md-sys-color-surface-variant);
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      border-radius: 8px;

      font-family: var(--md-sys-typescale-body-medium-font);
      font-weight: var(--md-sys-typescale-body-medium-weight);
      font-size: var(--md-sys-typescale-body-medium-size);
      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
      line-height: var(--md-sys-typescale-body-medium-height);
    }

    .drop-info {
      font-family: var(--md-sys-typescale-body-medium-font);
      font-weight: var(--md-sys-typescale-body-medium-weight);
      font-size: var(--md-sys-typescale-body-medium-size);
      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
      line-height: var(--md-sys-typescale-body-medium-height);
    }

    .step-pill.with-icon {
      padding-right: 0;
    }

    .step-pill.empty {
      border: 1px var(--md-sys-color-outline-variant) dashed;
    }

    .drop-target.spacer {
      width: 8px;
      height: 56px;
      transition: width 120ms cubic-bezier(0.4, 0, 0.6, 1);
    }

    .drop-target.spacer.dragover {
      width: 40px;
      border: 1px var(--md-sys-color-outline-variant) dashed;
      background-color: var(--md-sys-color-surface-variant);
      border-radius: 8px;
      margin: 0 4px;
    }

    .space-step-left {
      margin-left: 8px;
    }

    .number-input {
      min-width: 120px;
    }

    .step-row {
      margin: 20px;
    }
  `,
];
//# sourceMappingURL=HttpFlows.common.js.map