.form-control {
  background-color: $offwhite;
  border: 0;
  font-weight: normal;
  height: 2.5rem;

  &::placeholder {
    color: $grey;
  }

  &:focus {
    box-shadow: none;
  }
}

.form-text {
  font-size: 0.75rem;
  margin-left: 1em;
  margin-top: 0.125rem;
}

.text-muted {
  color: $mediumgrey !important;
}

.invalid-feedback {
  color: $red;
}

.side-facet {
  font-size: $font-size-extrasmall;

  legend {
    font-size: $font-size-extrasmall;
    text-transform: uppercase;
    color: $mediumgrey;
    margin-bottom: 0.25rem;
  }

  input[type='date'] {
    font-size: $font-size-extrasmall;
  }

  label span {
    font-size: 0.75rem;
    line-height: 1.5rem;
  }
}

.facet-label {
  font-size: $font-size-extrasmall;
  text-transform: uppercase;
  color: $mediumgrey;
  margin-bottom: 0.25rem;

  @at-root .focus &,
  &.facet-label-active {
    color: $blue;
  }
}

.custom-switch {
  padding-left: 1.875rem;

  .custom-control-label {
    font-size: 0.75rem;

    &::before {
      left: -1.875rem;
      height: 0.875rem;
      width: 1.375rem;
      border: 2px solid $mediumgrey;
      cursor: pointer;
    }

    &::after {
      top: 0.25rem;
      left: -1.875rem;
      width: 0.875rem;
      height: 0.875rem;
      background-color: $white;
      border: 2px solid $mediumgrey;
      cursor: pointer;
    }
  }

  .custom-control-input {
    &:checked ~ .custom-control-label {
      &::before {
        border-color: $innovationblue;
        background-color: $innovationblue;
      }

      &::after {
        border: 2px solid $innovationblue;
        transform: translateX(0.5rem);
      }
    }

    &:focus:not(:checked) ~ .custom-control-label {
      &::before {
        border-color: $mediumgrey;
      }
    }
  }
}