/*
---
name: Input
category: Foundations/Forms
tag: text
---
Basic inputs to build forms.

```html
<input name="test" placeholder="This is a test" />
```
*/
input,
select,
textarea {
  border-radius: 0;
  border: 1px solid color('gray-light');
  font-size: type-scale('normal');
  margin: margin('small') 0 margin('normal');
  padding: 0 padding('normal');
  width: 100%;
}

// We need to set a fixed height because select doesn't allow `padding`
input,
select,
button {
  height: su(2);
  // I must use line-height to center the elements to display it correctly in Firefox
  line-height: su(2);
}

// Update the outline
textarea:focus,
input:focus,
select:focus {
  outline: none;
  border-color: color-level('brand', 300);
  box-shadow: inset 0 1px 1px rgba(color('dark'), .05),
    0 0 8px rgba(color('secondary'), .3);
}

/*
---
name: Select
category: Foundations/Forms
tag: text
---
Selectors are a bit different in Safari. We can't remove the gloss effect without using the
`-webkit-appareance` hack.

```html
<select name="test">
  <option>Select one element</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option disabled>Option 3</option>
</select>
```
*/
select {
  background-color: color('white');
}

/*
---
name: Textarea
category: Foundations/Forms
tag: text
---
```html
<textarea>
This is a test
</textarea>
```
*/
textarea {
  padding: padding('normal');
  // Set the font family to display it in Firefox
  font-family: $type-body;
  // By default, don't allow users to resize it horizontally
  resize: vertical;
  // Set a base height to prevent problems with vertical rhythm
  min-height: su(5);
}

/*
---
name: Labels
category: Foundations/Forms
tag: text
---
```html
<label for="test">Label for input</label>
<input name="check" id="test" placeholder="test" />
```
*/
label {
  // TODO: change to gray for accesibility issues with gray-light!
  color: color('dark');
  font-size: type-scale('normal');

  + label {
    margin-left: margin('big');
  }

  &.checkbox,
  &.radio {
    cursor: pointer;

    input:disabled + span {
      opacity: .7;
    }
  }

  // Reduce the margin of inputs or selects after a label
  & + input,
  & + select,
  & + textarea {
    margin-top: 0;
  }
}


/*
---
name: Checkbox
category: Foundations/Forms
tag: text
---
```html
<label for="check1" class="checkbox">
  <input type="checkbox" name="check1" id="check1" />
  <span>Test</span>
</label>
<label for="check2" class="checkbox">
  <input type="checkbox" name="check2" id="check2" disabled />
  <span>Disabled</span>
</label>
```
*/
/*
---
name: Radio
category: Foundations/Forms
tag: text
---
```html
<label for="test1" class="radio">
  <input type="radio" name="test" id="test1"/>
  <span>Test 1</span>
</label>
<label for="test2" class="radio">
  <input type="radio" name="test" id="test2"/>
  <span>Test 2</span>
</label>
<label for="test3" class="radio">
  <input type="radio" name="test" id="test3"/>
  <span>Test 3</span>
</label>
<label for="test4" class="radio">
  <input type="radio" name="test" id="test4" disabled/>
  <span>Disabled</span>
</label>
```
*/
// scss-lint:disable QualifyingElement
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  margin: 0 margin('small') 0 0;
  width: auto;
  height: auto;
  // Hack to align checkbox and labels in Chrome and Firefox
  vertical-align: 1px;

  &:focus {
    text-decoration: none;
  }
}
// scss-lint:enable QualifyingElement

/**
 * This is the second part of the hack. Safari display the checkbox well so
 * we need to reset the value for Safari. This only affects to Safari 7+.
 * For Safari < 7, the checkbox and radio buttons will be showed 1px above the
 * center.
 *
 * If we don't use this hack, all checkboxes and radio buttons will be misaligned
 * in all versions of Firefox and Chrome. CSS is beatiful...
 */
// scss-lint:disable QualifyingElement
_::-webkit-full-page-media,
_:future,
:root input[type="checkbox"],
input[type="radio"] {
  vertical-align: baseline;
}
// scss-lint:enable QualifyingElement

/*
---
name: Buttons
category: Foundations/Forms
tag: text
---
```html
<a class="button" href="#">Link button</a>
<button class="button">Submit</button>
<input type="submit" value="Input Submit" class="button"/>
<button class="button" disabled="disabled">Disabled</button>
<button class="button" disabled>Disabled too</button>
```
*/
// To avoid incompatibilities with the current implementation, I'm going to comment the button selector
// button,
.button {
  // Display correctly non buttons elements like anchors
  border-radius: 0;
  border: none;
  box-shadow: 0 12px 10px -7px rgba(0, 0, 0, .2);
  color: color-level('text', 700);
  cursor: pointer;
  display: inline-block;
  font-size: type-scale('normal');
  // Center the text in the button for `button` and anchors
  line-height: su(2);
  // Align elements in the same line
  vertical-align: middle;
  // Remove text decoration on links
  text-decoration: none;
  // Fix button content when the screen is small
  max-width: 100%;
  overflow: hidden;
  padding: 0 padding('bigger');
  text-overflow: ellipsis;
  transition: transform .15s ease-in-out,
              box-shadow .15s ease-in-out;
  white-space: nowrap;
  will-change: transform;
  // Fix width and margins for input type:submit, button, reset.
  width: auto;
  margin-top: 0;
  margin-bottom: 0;

  // Default skin
  background: button-gradient('light');

  &:hover,
  &:focus {
    background: button-gradient('action');
    box-shadow: 0 12px 10px -7px rgba(0, 0, 0, .2);
    color: color('white');
  }

  &:active {
    transform: translateY(2px);
    color: color('white');
    box-shadow: 0 10px 10px -8px rgba(0, 0, 0, .2);
  }

  // Set the correct cursor on disabled
  &[disabled="disabled"],
  &[disabled="true"],
  &[disabled] {
    cursor: not-allowed;
    opacity: .5;
  }

  // Add a margin on consecutive elements
  + .button,
  + button {
    margin-left: margin('small');
  }
}

/**
 * Update the color of the placeholder due to the similarity of the normal text color
 * https://github.com/bitnami/ui/issues/143
 */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: color-level('gray-light', 600);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: color-level('gray-light', 600);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: color-level('gray-light', 600);
}