.input-group {
  justify-content: space-around;
  flex-wrap: nowrap;
}

.input-group-addon {
  // Newer Bootstrap does addons differently, added this in from older version.
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  // color: #495057;
  text-align: center;
  // background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  // Overwrite settings here down
  display: flex;
  align-items: center;
  color: $c-pallette-text;
  background-color: $c-pallette-transp-light;
  border-color: $c-pallette-transp-light;

  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  &:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.form-control,
.form-select {
  color: $c-pallette-text;
  background-color: $c-pallette-neutral;
  border-color: $c-pallette-transp-light;

  & > * {
    color: $c-pallette-text;
  }

  &:focus {
    color: $c-pallette-text;
    background-color: $c-pallette-neutral;
    border-color: $c-pallette-accent;
    box-shadow: none;
  }

  &:disabled,
  &[readonly] {
    background-color: $c-pallette-neutral;
    color: $c-pallette-text-muted;
  }
}

.form-select {
  appearance: auto;
  background-image: none;
  padding-right: 5px;
  white-space: pre-wrap;
}

.merged-input-group {
  // .input-group:not(:first-child) > * {
  //     border-top: none;
  // }
  .input-group:not(:first-child):not(:last-child) > * {
    border-radius: 0;
  }

  .input-group:first-child > * {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .input-group:last-child > * {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
