@charset "UTF-8";
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --help-text-default-color: Help Text color when state is default.
   * @prop --help-text-error-color: Help Text color when state is invalid.
   */
  --help-text-default-color: var(--kv-neutral-4, #bebebe);
  --help-text-error-color: var(--kv-error-light, #f9d1cc);
}

.help-text-container {
  width: calc(100% - var(--kv-spacing-2x, 8px));
  overflow: hidden;
  padding: var(--kv-spacing, 4px) 0 0 var(--kv-spacing-2x, 8px);
  color: var(--help-text-default-color);
  box-sizing: border-box;
}
.help-text-container .help-text {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 12px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  margin-right: var(--kv-spacing, 4px);
  color: var(--help-text-default-color);
}
.help-text-container span + span::before {
  content: "•";
  padding-right: var(--kv-spacing, 4px);
}
.help-text-container kv-icon {
  --icon-color: var(--help-text-default-color);
  align-items: center;
  margin-right: var(--kv-spacing-2x, 8px);
  float: left;
  margin-top: 2px;
}
.help-text-container.invalid {
  color: var(--help-text-error-color);
}
.help-text-container.invalid .help-text {
  color: var(--help-text-error-color);
}
.help-text-container.invalid kv-icon {
  --icon-color: var(--help-text-error-color);
}