/*
---
name: Button Colors
category: Foundations/Helpers
tag: helpers
---
Modify the color of the buttons. Available classes:

* `.button-primary`
* `.button-accent`
* `.button-action`
* `.button-danger`

```html
<button class="button button-primary">Submit</button>
<a class="button button-accent">Link button</a>
<a class="button button-action">Link button</a>
<a class="button button-danger">Link button</a>
<a class="button">Link button</a>
```
*/
.button-primary,
.button-accent,
.button-action,
.button-danger {
  color: white;
}

.button-primary {
  background: button-gradient('brand');
}

.button-accent {
  background: button-gradient('accent');
}

.button-action {
  background: button-gradient('action');
}

// The hover color is the actual .button-action so we need to slightly change it
// for this modifier
.button-action:hover {
  background: linear-gradient(135deg, transparent 7px, color-level('action', 600) 7px, color-level('action-light', 600) 100%);
}

.button-danger {
  background: button-gradient('danger');
}

/*
---
name: Button Sizes
category: Foundations/Helpers
tag: helpers
---
Modify the size of the buttons. Available classes:

* `.button-small`
* `.button-big`
* `.button-bigger`

```html
<button class="button button-primary button-small">Submit</button>
<a class="button button-accent">Link button</a>
<a class="button button-action button-big">Link button</a>
<a class="button button-bigger">Link button</a>
```
*/
@include button-size('small');
@include button-size('big');
@include button-size('bigger');

/*
---
name: Button Dropdown
category: Foundations/Helpers
tag: helpers
---
Add a caret icon to the right of the button.

* `.button-dropdown`
* `.button-dropdown-open`

See https://css-tricks.com/snippets/css/css-triangle/.

```html
<button class="button button-dropdown">Submit</button>
<a class="button button-accent button-dropdown button-dropdown-open">Link button</a>
<a class="button button-action button-big button-dropdown">Link button</a>
<a class="button button-bigger button-dropdown button-dropdown-open">Link button</a>
```
*/
.button-dropdown {
  &:after {
    border: 5px solid transparent;
    border-top-color: color('text');
    display: inline-block;
    content: '';
    height: 0;
    margin-left: margin('small');
    position: relative;
    top: padding('tiny') / 2;
    vertical-align: middle;
    width: 0;
  }

  &.button-action,
  &.button-accent {
    &:after {
      border-top-color: color('white');
    }
  }

  &-open {
    &:after {
      border-top-color: transparent;
      border-bottom-color: color('text');
      top: -.2em; // I need to force this position here to center the open caret icon
    }

    &.button-action,
    &.button-accent {
      &:after {
        border-top-color: transparent;
        border-bottom-color: color('white');
      }
    }
  }
}


/*
---
name: Form reverse
category: Foundations/Helpers
tag: helpers
---
The `form-reverse` modifier changes the form field styles inside the current container.
This is really useful for forms that are placed inside a container with a dark background.

For known dark backgrounds, the `form-reverse` modifier is added automatically.
The list of known dark backgrounds is:

* [Backgrounds](/category/Foundations/Helpers/#Backgrounds)
* [Linear Gradients](/category/Foundations/Helpers/#Linear%20Gradients)

**NOTE:** This behaviour is very opinionated and it may cause issues in some situations.
So, you can disable it using the `form-reverse-reset` class.

```html
<form>
  <div>
    <label for="username">Username</label>
    <input name="username" id="username" placeholder="Your username" />
  </div>
  <div>
    <label for="password">Password</label>
    <input name="password" id="password" placeholder="A secure password" />
  </div>
</form>

<section class="gradient-brand margin-t-big padding-normal">
  <form>
    <div>
      <label for="username">Username</label>
      <input name="username" id="username" placeholder="Your username" />
    </div>
    <div>
      <label for="password">Password</label>
      <input name="password" id="password" placeholder="A secure password" />
    </div>
  </form>
</section>
```
*/

/**
 * Enable form-reverse by default with known dark backgrounds.
 * @see https://github.com/bitnami/ui/pull/45#issuecomment-353398961
 * @see https://github.com/bitnami/ui/pull/45#issuecomment-353556092
 */
.bg-dark,
.bg-brand,
.bg-accent,
.bg-action,
.bg-skew,
[class*="gradient-"][class*="-brand"],
[class*="gradient-"][class*="-accent"],
[class*="gradient-"][class*="-action"],
.form-reverse {
  *:not(.form-reverse-reset) {
    label {
      color: color('gray-light');

      &.radio,
      &.checkbox {
        color: color('white');
      }
    }

    input,
    select,
    textarea {
      &,
      &:focus {
        border-color: transparent;
      }
    }
  }
}