:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

.form-control .form-control__label {
  display: none;
}
.form-control .form-control__help-text {
  display: none;
}

.form-control--has-label .form-control__label {
  display: inline-block;
  color: var(--sl-input-label-color);
  margin-bottom: var(--sl-spacing-xx-small);
}
.form-control--has-label.form-control--small .form-control__label {
  font-size: var(--sl-input-label-font-size-small);
}
.form-control--has-label.form-control--medium .form-control__label {
  font-size: var(--sl-input-label-font-size-medium);
}
.form-control--has-label.form-control--large .form-control_label {
  font-size: var(--sl-input-label-font-size-large);
}

.form-control--has-help-text .form-control__help-text {
  display: block;
  color: var(--sl-input-help-text-color);
}
.form-control--has-help-text .form-control__help-text ::slotted(*) {
  margin-top: var(--sl-spacing-xxx-small);
}
.form-control--has-help-text.form-control--small .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-small);
}
.form-control--has-help-text.form-control--medium .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-medium);
}
.form-control--has-help-text.form-control--large .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-large);
}

.form-control--has-error-text .form-control__help-text {
  display: none;
}
.form-control--has-error-text .form-control__input > .input[part=base],
.form-control--has-error-text .form-control__input > .select *[part=select-box] {
  border-color: var(--sl-input-error-text-color);
}
.form-control--has-error-text .form-control__error-text {
  display: block;
  color: var(--sl-input-error-text-color);
}
.form-control--has-error-text .form-control__error-text ::slotted(*) {
  margin-top: var(--sl-spacing-xxx-small);
}
.form-control--has-error-text.form-control--small .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-small);
}
.form-control--has-error-text.form-control--medium .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-medium);
}
.form-control--has-error-text.form-control--large .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-large);
}

.time-period__selector {
  display: flex;
  gap: var(--sl-spacing-small);
}

sl-select {
  min-width: 80px;
}