import { css } from 'lit'

export default css`
  .modeling-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .row {
    display: flex;
    flex-direction: row;
    /* align-items: flex-start; */

    .input {
      flex: 1;
    }

    .input.chips-input,
    .input.select {
      display: flex;
      flex-direction: column;
    }

    .help {
      display: inline-flex;
      align-items: center;
      align-content: stretch;
    }

    &.input-row .help {
      height: 56px;
    }
  }

  /* .checkbox-group > .row > .help,
  .checkbox.row > .help {
    height: 40px;
  } */

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

  .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .checkbox-group > .row,
  .checkbox.row {
    height: 48px;
    flex: 1;
  }

  .input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

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

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

  .meta {
    color: var(--md-sys-color-on-surface-variant);
  }

  .drop-zone {
    outline: medium var(--md-sys-color-tertiary) dashed;
    background-color: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    outline-offset: 2px;
    border-radius: var(--md-sys-shape-corner-extra-small);
  }

  .taxonomy-menu .menu-category-title {
    height: 40px;
    color: var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface));
    display: flex;
    align-items: center;
    padding: 0 16px !important;
  }

  .taxonomy-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;

    .label {
      flex: 1;
    }
  }
`
