//
// + Input group
// =============================================================================

* {
  transition: all 0.25s;
}


.input-group-horizontal,
.input-group-vertical {
  display: flex;

  input[type='text'] {
    &:focus {
      flex: 4;
    }
  }

  input,
  button {
    border-radius: unset; // should check to see if needs to be unset?
    flex: 1;

    &:hover,
    &:focus {
      z-index: 1;
    }
  }
}

.input-group-horizontal {
  input,
  button {
    margin-left: em(-$border-thickness);

    &:first-child {
      @include radius($border-radius x x $border-radius, em);
      margin-left: 0;
    }

    &:last-child {
      @include radius(x $border-radius $border-radius x, em);
      margin-right: em(-$border-thickness);
    }
  }
}

.input-group-vertical {
  flex-direction: column;

  input,
  button {
    margin-top: em(-$border-thickness);

    &:first-child {
      @include radius($border-radius $border-radius x x, em);
      margin-top: 0;
    }

    &:last-child {
      @include radius(x x $border-radius $border-radius, em);
      margin-bottom: em(-$border-thickness);
    }
  }
}

//
// + Input group
// =============================================================================

* {
  transition: all .25s;
}

.input-group-horizontal,
.input-group-vertical {
  display: flex;

  input,
  button {
    border-radius: unset; // should check to see if needs to be unset?
    flex: 1;
  }

  input {
    &:hover,
    &:focus {
      z-index: 2;
    }
  }

  button {
    &:hover,
    &:focus {
      z-index: 1;
    }
  }

  input[type='text'] {
    &:focus {
      flex: 4;
    }
  }
}

.input-group-horizontal {
  input,
  button {
    margin-left: em(-$border-thickness);

    &:first-child {
      @include radius($border-radius x x $border-radius, em);
      margin-left: 0;
    }

    &:last-child {
      @include radius(x $border-radius $border-radius x, em);
      margin-right: em(-$border-thickness);
    }
  }
}

.input-group-vertical {
  flex-direction: column;

  input,
  button {
    margin-top: em(-$border-thickness);

    &:first-child {
      @include radius($border-radius $border-radius x x, em);
      margin-top: 0;
    }

    &:last-child {
      @include radius(x x $border-radius $border-radius, em);
      margin-bottom: em(-$border-thickness);
    }
  }
}

Fix input/button z-index on hover
Fix input/button z-index on hover
