// input container
.container__inputs {
  width: 98%;
  max-width: 800px;
  margin: 0 auto;
}

// styles the input field. Strip default styling and add borders
input {
  font-weight: 200;
  font-family: $font;
  color: $link;
  font-size: 4em;
  outline: none; // Chrome outline
  box-shadow: none; // Firefox outline
  -webkit-appearance: none; // mobile Safari
  border-radius: 0; // mobile Safari
  border: none;
  background: transparent;
  display: block-inline;
  height: 2em;
  width: 530px;
  float: left;
  padding: 0 2%;
  position: relative;
  z-index: 0;
  transition: color 0.2s;

  &::placeholder {
    color: $link;
  }
}

// Remove "X" from input for IE
input::-ms-clear {
  display: none;
}

// On focus, change styling of borders
input:focus {
  color: $text;

  &::placeholder {
    color: $text;
    opacity: 0.2;
  }
}

// Submit icon positioning next to # seasons
.submit {
  color: $link;
  cursor: pointer;
  margin-top: $space / 1.2;
  float: right;
  font-size: 5em;
  text-decoration: none !important;
  outline: none;
  -webkit-appearance: none; // mobile Safari
  border: none;
  background: transparent !important;
  transition: color 0.2s;
}

// On hover or focus, change color
.submit:hover,
.submit:focus {
  color: $text;
}

// # seasons input positioning next to TV show input
.seasons {
  float: left;
  width: $space * 3.1;
  padding-right: 0;
  border-left: solid 1px rgba(255, 255, 255, 0.2);
}

// Hides # seasons default "^ v" icons buttons
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  width: 30%;
  height: 100%;
  font-family: $font;
  line-height: 1.6;
  font-size: 0.5em;
  position: relative;
  opacity: 0;
  transition: color 0.2s;
}

// # seasons buttons show slightly on focus
input[type=number]:focus::-webkit-inner-spin-button {
  opacity: 0.2;
  cursor: pointer;
}

// # seasons buttons show full on hover
input[type=number]:focus::-webkit-inner-spin-button:hover {
  opacity: 1;
}

// # seasons buttons replacement
input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
  content: "^";
  position: absolute;
  right: 0;
  height: 50%;
  top: 25%;
}

// Reverses the # seasons smaller button
input[type=number]::-webkit-inner-spin-button:after {
  bottom: 20%;
  top: auto;
  z-index: 100;
  transform: rotate(180deg);
}

// When landscape iPad cuts off "w" from "show"
@media screen and (max-width: 1024px) {
  .tvshow {
    font-size: 0.96em;
  }
}