@value textDark, textMedium from '../colors.css';
@value inputHeight, activeEdgeWidth from '../dimensions.css';

.common {
  position: relative;
}

.common:focus {
  outline: none;
}

.common:focus > input, .common:focus > textarea {
  outline: 1px dotted black;
}

.normal {
  composes: common;
}

.normal > div {
  top: calc(inputHeight + activeEdgeWidth - 1px);
}

.embedded {
  composes: common;
}

.embedded > div {
  left: -1px;
  top: calc(inputHeight + activeEdgeWidth - 2px);
  min-width: calc(100% + 2px);
}

.open {
  z-index: 2;
}

.open > input:enabled, .open > textarea:enabled {
  outline: 2px solid textMedium;
}

.open > input:disabled, .open > textarea:disabled {
  outline: 1px dotted black;
}
.open > input:focus, .open > textarea:focus {
  outline: 2px solid textDark;
}