@value textLabel, textLight, inputTableReadOnlyBorder, readOnlyBorder from '../colors.css';

.common {
  display: flex;
  align-items: flex-end;
  width: 100%;
  box-sizing: border-box;
}

.common > div {
  padding: 0 2px;
  box-sizing: border-box;
  flex: 1;
}

.common > div > button {
  background: transparent;
  border: none;
  padding: 0;
}

.common > div > button::-moz-focus-inner {
  border: 0;
}

.common > div > button:focus {
  outline: 1px dotted black;
}

.common > div > button > label > * {
  text-decoration: underline;
}

.normal {
  composes: common;
  border: 1px solid textLight;
  border-bottom: none;
}

:global(.cspace-input-CompoundInput--readOnly) .normal {
  border-color: inputTableReadOnlyBorder;
}

.embedded {
  composes: common;
}