@value inputHeight, searchBooleanOpWidth, searchColumnMarginRight, searchConditionPaddingTop from '../dimensions.css';

.common {
  font-size: 14px;
}

.common > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.common > header {
  display: flex;
}

.common > header > div {
  flex: 1 1 auto;
}

.common > header > button {
  flex: 0 0 auto;
}

.common > header :global(.cspace-input-DropdownMenuInput--common) {
  display: inline-block;
}

.common > header :global(.cspace-input-DropdownMenuInput--common) > :global(.cspace-input-TextInput--common) {
  display: inline;
  width: searchBooleanOpWidth;
}

.normal {
  composes: common;
}

.normal > ul > li {
  display: flex;
  align-items: baseline;
}

.normal > ul > li:last-child > div {
  border-bottom: 1px solid rgb(220, 220, 220);
  margin-bottom: searchConditionPaddingTop;
}

.normal > ul > li > *:first-child {
  flex: 0 0 auto;
  width: searchBooleanOpWidth;
  margin-right: searchColumnMarginRight;
  text-align: center;
}

.normal > ul > li > div {
  padding-top: searchConditionPaddingTop;
  border-top: 1px solid rgb(220, 220, 220);
  flex: 1 1 auto;
}

.normal > footer {
  display: flex;
  padding: 4px 0;
}

.normal > footer > div:first-of-type {
  flex: 0 0 auto;
  width: searchBooleanOpWidth;
  margin-right: searchColumnMarginRight;
  text-align: center;
  color: rgb(200, 200, 200);
}

/* .normal > footer::before {
  display: inline-block;
  width: searchBooleanOpWidth;
  margin-right: searchColumnMarginRight;
  text-align: center;
  content: '+';
} */

.normal > footer > div > :global(.cspace-input-MiniButton--common) {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 8px;
  outline: 1px solid rgb(220, 220, 220);
  font-size: 14px;
  padding-left: 4px;
  padding-right: 10px;
}

.inline {
  composes: common;
  display: inline-block;
}

.inline > div,
.inline > ul {
  display: inline-block;
}

.inline > ul > li {
  display: inline;
  line-height: calc(inputHeight + 2px);
}