libs/barista-components/form-field/src/form-field.scss
@import '../../style/font-mixins';
@import '../../core/src/style/variables';
@import '../../core/src/style/form-control';
@import '../../core/src/style/interactive-common';

.dt-form-field {
  display: block;
  position: relative;
  text-align: left;
}

.dt-form-field-body {
  @include dt-form-control-body();
}

.dt-form-field-non-box .dt-form-field-body {
  border: none;
  border-radius: 0;
  min-height: 0;
}

.dt-focused:not(.dt-form-field-non-box) .dt-form-field-body {
  @include dt-focus-style();

  .dt-input:focus:not([disabled]) {
    @include dt-no-focus-style();
  }
}

.dt-form-field-prefix,
.dt-form-field-suffix {
  white-space: nowrap;
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
}

.dt-form-field-infix {
  display: block;
  position: relative;
  flex: auto;
  min-width: 0;
}

// Hack to make sure the child element of the infix,
// prefix or suffix container is display block.
// This is needed to prevent a 1px spacing issue
// if the child has display inline-block or inline.
.dt-form-field-infix.dt-form-field-infix,
.dt-form-field-prefix.dt-form-field-prefix,
.dt-form-field-suffix.dt-form-field-suffix {
  > * {
    display: block;
  }
}

.dt-prefix {
  &:first-child:not(.dt-button) {
    margin-left: 12px;
  }
  + .dt-prefix {
    margin-left: 2px;
  }
}

.dt-suffix {
  &:last-child:not(.dt-button) {
    margin-right: 12px;
  }
  + .dt-suffix {
    margin-left: 2px;
  }
}

.dt-prefix,
.dt-suffix {
  text-align: center;
}

// Buttons in form fields are 2 px smaller => 30px
.dt-button.dt-prefix,
.dt-button.dt-suffix,
.dt-icon-button.dt-prefix,
.dt-icon-button.dt-suffix {
  height: 30px;
  width: 30px;
}

// We also need to specify the size of icons used as prefix or suffix
// to align them correctly and prevent them from growing out of box
.dt-icon.dt-prefix,
.dt-icon.dt-suffix {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  svg {
    width: 20px;
    height: 20px;
  }
}

.dt-form-field-label {
  @include dt-label-font();
  position: relative;
  display: block;
  padding-bottom: 4px;
}

.dt-form-field-subscript-wrapper {
  position: relative;
}

.dt-form-field-error {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: 1px solid $gray-300;
  background-color: $gray-100;
  padding: 8px 12px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  transform-origin: top left;

  // Make sure the error is not overlapped by other elements
  z-index: 1;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    left: -1px;
    right: -1px;
    height: 2px;
    background-color: $error-color;
  }
}

.dt-form-field-invalid .dt-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dt-form-field-hint-wrapper {
  display: flex;
  padding-top: 6px;
}

.dt-form-field-hint-spacer {
  flex: 1 0 8px;
}

.dt-hint,
.dt-error {
  @include dt-form-control-hint();
}

.dt-hint {
  color: $gray-500;
}

.dt-error {
  color: $error-color;
}

/** form field does not have ViewEncapsulation enabled, hence
no host-context can work */
.dt-theme-dark .dt-form-field-label {
  color: #fff;
}
