// sass-lint:disable force-attribute-nesting
// sass-lint:disable no-qualifying-elements
// sass-lint:disable force-element-nesting
// sass-lint:disable force-pseudo-nesting

@import 'variables';

.button.button-primary,
button.button-primary,
input[type='submit'].button-primary,
input[type='reset'].button-primary,
input[type='button'].button-primary {
  background: lighten($bg, 10%);
  border-color: $fg;
  color: $color-primary-1;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type='submit'].button-primary:hover,
input[type='reset'].button-primary:hover,
input[type='button'].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type='submit'].button-primary:focus,
input[type='reset'].button-primary:focus,
input[type='button'].button-primary:focus {
  background: lighten($bg, 15%);
  border-color: darken($fg, 10%);
  color: $white;
}

button,
input[type='submit'],
input[type='reset'],
input[type='button'] {
  background-color: transparent;
  border: 1px solid $grey-one;
  border-radius: 4px;
  box-sizing: border-box;
  color: $grey-two;
  cursor: pointer;
  letter-spacing: .1rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.button:hover,
button:hover,
input[type='submit']:hover,
input[type='reset']:hover,
input[type='button']:hover,
.button:focus,
button:focus,
input[type='submit']:focus,
input[type='reset']:focus,
input[type='button']:focus {
  border-color: $grey-one;
  color: $bg;
  outline: 0;
}


// Forms
input[type='email'],
input[type='search'],
input[type='text'], {
  background-color: $white;
  border: 1px solid $border-color-cream;
  border-radius: 4px;
  box-sizing: border-box;
}

.search-container {
  box-sizing: border-box;
  display: inline-flex;
}

input[type='email']:focus,
input[type='search']:focus, {
  border: 2px solid lighten($bg, 8%);
  outline: 0;
}

//input[type='radio'] {
//  display: inline;
//}

// - Base
input[type='email'],
input[type='number'],
input[type='search'],
input[type='text'],
input[type='tel'],
input[type='url'],
input[type='password'],
textarea {
  appearance: none; //Removes awkward default styles on some inputs for iOS
}
