@value (
  varTextDefault,
  varBackgroundActive
) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value ( var-sp-up-1 ) from "~@xo-union/tk-css-spacing/lib/variables.css";
.container {
  composes: body1 from "~@xo-union/tk-ui-typography/lib/font-scale-categories.css";
  cursor: default;
  margin-bottom: 1px;
  padding: var(--tkww-union-fields-select-option-padding, 15px 24px);
  position: relative;
}

.container:last-child {
  margin-bottom: 0;
}

.is-normal {
  color: var(--tkww-union-fields-select-option-color, varTextDefault);
}

.checkmark {
  display: none;
  height: 100%;
  margin-right: var-sp-up-1;
  position: absolute;
  right: 0;
  top: 0;
}

.is-selected {
  background-color: var(--tkww-union-fields-select-option-selected-background-color, varBackgroundActive);
  color: var(--tkww-union-fields-select-option-selected-color, varTextDefault);
}
.is-selected .checkmark {
  align-items: center;
  display: flex;
  justify-content: center;
}

.is-active,
.is-active.is-selected {
  background-color: var(--tkww-union-fields-select-option-selected-background-color, varBackgroundActive);
  color: var(--tkww-union-fields-select-option-selected-color, varTextDefault);
  font-weight: 700;
}

.container:hover {
  background-color: var(--tkww-union-fields-select-option-hover-background-color, varBackgroundActive);
  color: var(--tkww-union-fields-select-option-selected-color, varTextDefault);
  text-decoration: underline;
}