:host {
  display: block;
  --cell-spacing-top: calc(3 * var(--spacing-unit));
  --cell-padding: var(--cell-spacing-top) calc(2 * var(--spacing-unit));
  --cell-height: calc(var(--cell-spacing-top) * 2 + 31px);
  flex: var(--cell-weight);
  /* provided by js */
  width: var(--cell-width);
  /* provided by js */
  height: var(--cell-height);
  color: var(--color-text-title);
  outline: none;
  border-radius: 3px;
  padding: var(--cell-padding);
}
:host.focused {
  box-shadow: inset 0px 0px 0px 2px var(--color-primary);
}
:host .small {
  --cell-padding: calc(2 * var(--spacing-unit)) calc(1 * var(--spacing-unit));
}
:host .medium {
  --cell-padding: calc(3 * var(--spacing-unit)) calc(2 * var(--spacing-unit));
}
:host .large {
  --cell-padding: calc(4 * var(--spacing-unit)) calc(3 * var(--spacing-unit));
}