@value textLight, inputBg, readOnlyBorder, readOnlyBg from '../colors.css';
@value inputHeight, inputMargin from '../dimensions.css';

.common {
  composes: common from './Input.css';
  margin: 0 0 10px 0;
  border: none;
  padding: 0;
}

.normal {
  composes: common;
}

.readOnly {
  composes: common;
}

.common > div {
  width: 100%;
  display: table;
  border: 1px solid;
  border-collapse: collapse;
  box-sizing: border-box;
}

.normal > div {
  border-color: textLight;
}

.readOnly > div {
  border-color: readOnlyBorder;
}

.common > div > * {
  display: table-row;
}

.common > div > header {
  padding: 0 calc(inputHeight - 2px);
}

.common > div > header > * {
  display: table-cell;
}

.common > div > div > * {
  display: table-cell;
  border: 1px solid;
  vertical-align: top;
}

.common > div > div:nth-of-type(even) {
  background-color: #EBF4FF;
}

.normal > div > div > * {
  border-color: textLight;
}

.readOnly > div > div > * {
  border-color: readOnlyBorder;
}

.common > div > div > div > :global(.cspace-input-CompoundInput--common) > :global(.cspace-layout-Panel--common) {
  margin: 0;
  border: none;
}

/* .common > div > div > *:first-child,
.common > div > div > *:nth-child(3),
.common > footer > *:first-child {
  width: calc(inputHeight - 2px);
}

.normal > div > div > *:first-child,
.normal > div > div > *:nth-child(3),
.normal > footer > *:first-child {
  background-color: inputBg;
}

.readOnly > div > div > *:first-child {
  background-color: readOnlyBg;
} */

.common > footer > * {
  border: 1px solid textLight;
  border-top: none;
}