@import 'themes/default';
@import 'themes/bandit';

.Input-Group {
  align-items: stretch;
  display: flex;
}

.Input-Group__Item:not(.Input-Group__Item--standalone) {
  margin-bottom: 0;

  &:not(:first-child) {
    margin-left: var(--Input-Group__Item____left-offset);
  }

  &:focus-within {
    z-index: 1;
  }

  .Input-Group__Addon,
  .Input,
  .Button {
    border-radius: 0;
    height: 100%;
    position: relative;
  }

  &:first-child {
    .Input-Group__Addon,
    .Input,
    .Button {
      border-bottom-left-radius: var(--Input____radius);
      border-top-left-radius: var(--Input____radius);
    }
  }

  &:last-child {
    .Input-Group__Addon,
    .Input,
    .Button {
      border-bottom-right-radius: var(--Input____radius);
      border-top-right-radius: var(--Input____radius);
    }
  }
}

.Input-Group__Addon {
  align-items: center;
  background-color: var(--Input--Affix____bg-color);
  border: 1px solid var(--Input--Affix____border-color);
  color: var(--Input--Affix____color);
  display: flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: var(--Input____line-height);
  margin-bottom: 0;
  padding: var(--Input____padding);
  transition: color var(--Input____transition-duration),
    border var(--Input____transition-duration);

  &--mini {
    padding: var(--Input--mini____padding);
  }

  &--disabled {
    opacity: 0.3;
    pointer-events: none;
  }
}

.Input-Group__Icon {
  position: absolute;
  margin: 0;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
  color: var(--Input____color);
  transition: color var(--Input____transition-duration);
  padding: 0 var(--Input____padding);

  // Input state applies styling changes to the icon if one is present
  input:placeholder-shown + & {
    color: var(--Input--Placeholder____color);
  }

  input:focus + & {
    color: var(--Input--focused____color);
  }

  input:disabled + & {
    opacity: 0.3;
  }

  input[type='search'] + & {
    padding: 0 var(--Input____padding) 0 var(--Input--Search____padding-left);
  }
}