/*******************************
        Input Overrides
*******************************/

/**
 * Make the action input stackable.

 * Have to use important and hacks since it's not default SUI behaviour.
 * Mostly meant for the front page newsletter signup composite where
 * input, select and button are side by side.
 */
@media only screen and (max-width: @largestTabletScreen) {
  .ui.stackable.input {
    flex-direction: column;
    &.fluid > input {
      width: 100% !important; // Override .ui.fluid.input's !important.
    }
    & > input:first-child {
      border-radius: @borderRadius @borderRadius 0 0 !important; // Override border-*-radius settings.
      border: @border !important; // Override border-* settings.
      border-bottom: 0 !important; // Override previous.
      &:focus {
        border-color: @focusBorderColor !important; // Override border-*-color settings.
        border-bottom: @borderWidth solid @focusBorderColor !important; // Override no bottom border.
        margin-bottom: -@borderWidth; // Don't shift when showing border.
        z-index: 1; // Display above the other elements.
      }
    }
    & > .ui.dropdown {
      min-width: 100%; // Override fixed min width.
    }
    & > button:last-child {
      border-radius: 0 0 @borderRadius @borderRadius !important; // Override border-*-radius settings.
      justify-content: center; // Center align text.
    }
  }
}