// API modeling screen common styles
import { css } from 'lit'

export default css`
  :host {
    display: block;
  }

  .screen-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 1 0 0;
    align-self: stretch;
  }

  .screen-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
  }

  .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
  }

  .form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .config-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .horizontal {
    flex-direction: row;
    gap: 12px;

    &.center {
      align-items: center;
    }
  }

  .config-section.horizontal .section-header {
    flex: 1;
  }

  .meta-section {
    max-width: 700px;
  }

  .row {
    display: flex;
    flex-direction: row;

    .input {
      flex: 1;
    }

    .help {
      height: 56px;
      display: inline-flex;
      align-items: center;
    }
  }

  ui-select {
    min-width: 280px;
  }

  .checkbox.row {
    height: 40px;

    .help {
      height: 40px;
    }
  }

  .enum {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .checkbox > .label {
    display: flex;
    flex-direction: column;
  }

  .generate-button {
    padding-top: 8px;
    margin-left: 12px;
  }

  .session-transport-settings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .transport-settings-item {
      display: flex;
      padding: 0 0 0 84px;
      align-items: flex-start;
      gap: 10px;
      align-self: stretch;
    }

    .transport-settings-item.separate {
      padding: 8px 0 8px 64px;
    }

    .transport-settings-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-self: stretch;
    }
  }

  .no-property-warning {
    color: var(--md-sys-color-error);
    background-color: var(--md-sys-color-error-container);
    padding: 4px 8px;
    border-radius: var(--md-sys-shape-corner-small, 4px);
    display: flex;
    align-items: center;
    gap: 8px;
  }
`
