// Import any global variables from "../../variables/*.scss"
@import "../../variables/colors.scss";
@import "../../variables/spacing.scss";
@import "../../variables/fonts.scss";

$inputStackHeight: 60px;
$inputStackBorderWidth: 1px;

// A stack item is one of the inputs in an input-stack, ie, a text box or a password box.
// NOTE: this mixin requires that if an item is focused, the parent div should contain the class
// `focus`. For example:
//
// <div className="input-stack-item focus">
//   <input type="text" /> {/* <- This input is focused! */}
// </div>
// <div className="input-stack-item">
//   <input type="text" />
// </div>
//
@mixin make-input-stack-item(
  $height: $inputStackHeight,
  $borderWidth: $inputStackBorderWidth,
  $validColor: $midnight
) {
  position: relative;

  // Round corners of each item so that the top and bottom borders of the whole section are rounded.
  &:first-child input {
    border-top-left-radius: $borderRadiusBase;
    border-top-right-radius: $borderRadiusBase;
  }
  &:last-child input {
    border-bottom-left-radius: $borderRadiusBase;
    border-bottom-right-radius: $borderRadiusBase;
    border-bottom-color: $gray300;
  }


  // The input itself. The input here is the main "building block", the surrounding div doesn't
  // really do anything in regards to the display of each input. The input has borders on all sides,
  // though the bottom border is transparent. When the user focuses the input, all borders turn
  // $valid-color, and the item below's top border color is turned transparent. This is required
  // because two neighboring items share a border.
  input {
    display: block;
    font-family: $fontBase;
    font-size: 16px;
    background-color: #fff;

    width: calc(100% - 40px);
    height: $height - (2 * $borderWidth) - (2 * 20px); // 20px = vertical padding around each input
    padding: 20px;
    margin-bottom: 0px;

    border-radius: 0px;
    -webkit-appearance: none;

    // On active, remove outline and add a border color.
    outline: none;
    border: $borderWidth solid #CBCFD6;
    border-bottom-color: transparent;
  }
  input:focus {
    border-color: $validColor;
  }
  input::placeholder { color: $gray300; }
  &Focus + & input {
    border-top-color: transparent;
  }

  // The "bubble" on the right of the input. This is why each is surrounded in a div - since an
  // :after cannot be applied to a self closing element such as an input, a container is required.
  // The bubble indicates the state of the input when the input isn't focused. When the input is
  // focused, then the bubble turns gray300 and he border of the input box indicates status.
  &:after {
    content: " ";
    display: block;
    background-color: $validColor;

    position: absolute;
    top: 0px;
    right: 20px;

    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: ($inputStackHeight - 8px) / 2;
    margin-bottom: $inputStackHeight - 8px;
  }
  &.focus:after {
    background-color: $gray300;
  }
}

// Add this mixin to a input-stack item to show an invalid (or other) state.
@mixin make-input-stack-item-invalid($color: $red) {
  input:focus {
    border-color: $color;
  }

  // Make an item share the border with the item below it, and when a user focuses one item, make
  // the top border of the next item primary colored (since that border is shared with the previous
  // item).
  &.focus + & input {
    border-top-color: $color !important;
  }
  &:after {
    background-color: $color;
  }
}

.inputStackItem {
  @include make-input-stack-item;
}
.inputStackItemInvalid {
  @include make-input-stack-item-invalid;
}