:root {
  --component-label-width: 152px;
  --component-flex-direction: column;
  --component-container-flex-direction: column;
  --component-container-justify-content: flex-start;
  --component-container-align-items: normal;
}

@media (min-width: 992px) {
  :root {
    --component-flex-direction: row;
  }
}

/**
 * Options.
 */

.component-item[data-option-flex-direction="column"] {
  --component-flex-direction: column;
}

.component-item[data-option-flex-direction="row"] {
  --component-flex-direction: row;
}

.component-item[data-option-container-flex-direction="column"] {
  --component-container-flex-direction: column;
}

.component-item[data-option-container-flex-direction="row"] {
  --component-container-flex-direction: row;
}

.component-item[data-option-container-justify-content="start"] {
  --component-container-justify-content: flex-start;
}

.component-item[data-option-container-justify-content="center"] {
  --component-container-justify-content: center;
}

.component-item[data-option-container-justify-content="end"] {
  --component-container-justify-content: flex-end;
}

.component-item[data-option-container-align-items="center"] {
  --component-container-align-items: center;
}

.component-item {
  display: flex;
  flex-direction: var(--component-flex-direction);
  gap: 16px;
}

.component-item__label {
  font-size: 14px;
  font-weight: 400;
  margin-block: 9px;
  min-width: var(--component-label-width);
  width: var(--component-label-width);
  max-width: 100%;
  flex-shrink: 0;
}

.component-item__container {
  display: flex;
  flex-direction: var(--component-container-flex-direction);
  gap: 8px 16px;
  flex-grow: 1;
  justify-content: var(--component-container-justify-content);
  align-items: var(--component-container-align-items);
}

.component-item__element {
  display: grid;
  flex-grow: 1;
  grid-template-areas: "element";
}

.component-item__element > .form-control.form-control {
  grid-area: element;
}

.component-item__description {
  font-size: 13px;
  line-height: 20px;
  color: #8F8F8F;
}

/**
 * Placeholder
 */
.component-item__placeholder {
  grid-area: element;
  pointer-events: none;
  padding: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 22px;
  color: rgba(22, 22, 22, 0.44);
}

.component-item__placeholder-hidden {
  color: transparent;
}

/**
 * Number.
 */
.component-item--type-number {
  --component-container-flex-direction: row;
}

/**
 * Checkboxes.
 */
.component-item--type-checkboxes .component-item__container {
  margin-block: 9px;
}

/**
 * Group.
 */
.component-item--type-group {
  --component-container-flex-direction: row;
}

/**
 * Actions.
 */
.component-item--type-actions {
  --component-container-flex-direction: row;
}

.ui-anchor {
  z-index: 1;
}