@value inputHeight from '../dimensions.css';

.common {
  width: 100%;
  position: relative;
  display: flex;
}

.common + .common {
  border-left: 1px solid rgb(220, 220, 220);
}

.common > div {
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.common > div > header {
  font-size: 12px;
  line-height: calc(inputHeight - 2px);
  color: rgb(160, 160, 160);
}

.common > div > div {
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 0 2px;
}

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

.common ul > li {
  padding-left: 20px;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 0 2px;
}

.warning {
  composes: common;
}

.warning ul > li,
.error ul > li:global(.cspace-ui-ValidationErrorMessage--nonblocking) {
  background-image: url(../../images/warning.svg);
}

.error {
  composes: common;
}

.error > div > header {
  color: rgb(219, 161, 161);
}

.error > div > div > ul > li,
.error a {
  color: rgb(220, 0, 0);
}

.error ul > li {
  background-image: url(../../images/error.svg);
}

.error ul > li:global(.cspace-ui-ValidationErrorMessage--nonblocking) {
  color: unset;
}

.pending {
  composes: common;
}

.pending ul > li {
  background-image: url(../../images/spinner.svg);
}

.success {
  composes: common;
}

.success ul > li {
  background-image: url(../../images/success.svg);
}