// 888               888    888
// 888               888    888
// 888               888    888
// 88888b.  888  888 888888 888888 .d88b.  88888b.  .d8888b
// 888 "88b 888  888 888    888   d88""88b 888 "88b 88K
// 888  888 888  888 888    888   888  888 888  888 "Y8888b.
// 888 d88P Y88b 888 Y88b.  Y88b. Y88..88P 888  888      X88
// 88888P"   "Y88888  "Y888  "Y888 "Y88P"  888  888  88888P'

// Buttons
//
// This is our base button. It can be generated using a `<button type="button">` element, an `<input type="button">` element, or a `<a class="button" role="button">` element.
//
// Common practice on the web suggests that:
//
// * `<button>` elements should be used to trigger a page action, such as hiding/displaying content.
// * `<input>` elements should be used to trigger `<form>` actions.
// * `<a>` elements should be used to trigger a move to a new page or view.
//
// The variations below can be combined so that you can have, for example, an XL-sized, right-aligned, primary-colored button with an icon on it.
//
// <div class="panel state-warning">
//
// # Accessibility Note
// **Always specify a `type`** when using a `<button>` element and **always add `role="button"`** when using an `<a>` element as a button.
//
// </div>
//
// Markup:
// <button type="button">Button Button</button>
// <input type="button" value="Input Button">
// <a class="button" role="button">Link Button</a>
//
// Styleguide Components.Buttons
button,
input[type='button'],
a.button,
a.button[role='button'] {
  align-items: center;
  background-color: $color-theme-base-background;
  background-image: none;
  border: 1px solid $color-theme-base-border;
  border-radius: $border-radius-base;
  color: $color-theme-base-text;
  cursor: pointer;
  display: inline-flex;
  font-weight: $font-weight-normal;
  height: auto;
  justify-content: center;
  line-height: $line-height-button;
  padding: $space-s;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: $transition-base;

  &:active,
  &:focus,
  &:hover {
    background-color: $color-theme-dark-background-alt;
    color: $color-theme-dark-text;
  }

  + button,
  + input[type='button'],
  + a.button {
    margin-left: $space-s;
  }

  // Disabled Button
  //
  // Disable `<button>` and `<input>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
  //
  // Markup:
  // <button type="button" disabled>Disabled Button Button</button>
  // <input type="button" value="Disabled Input Button" disabled>
  // <a class="button disabled" role="button">Disabled Link Button</a>
  //
  // Styleguide Components.Buttons.Disabled
  //
  // Weight: 5
  &[disabled],
  &.disabled {
    background-color: inherit;
    color: inherit;
    cursor: not-allowed;
    opacity: 0.5;

    &:active,
    &:focus,
    &:hover {
      background-color: inherit;
      color: inherit;
    }
  }

  // Button Sizes
  //
  // Styleguide Components.Buttons.Sizes
  //
  // Weight: 2

  // Small Button
  //
  // Add a `.button-s` class for a smaller button.
  //
  // Markup:
  // <button type="button">Button</button>
  // <button type="button" class="button-s">Small Button</button>
  //
  // Styleguide Components.Buttons.Sizes.Small
  //
  // Weight: 1
  &.button-s {
    font-size: $font-size-xs;
  }

  // Large Button
  //
  // Add a `.button-l` class for a larger button.
  //
  // Markup:
  // <button type="button">Button</button>
  // <button type="button" class="button-l">Large Button</button>
  //
  // Styleguide Components.Buttons.Sizes.Large
  //
  // Weight: 2
  &.button-l {
    font-size: $font-size-l;
  }

  // XL Button
  //
  // Add a `.button-xl` class for an XL button.
  //
  // Markup:
  // <button type="button">Button</button>
  // <button type="button" class="button-xl">XL Button</button>
  //
  // Styleguide Components.Buttons.Sizes.XL
  //
  // Weight: 3
  &.button-xl {
    font-size: $font-size-xl;
  }

  // XXL Button
  //
  // Add a `.button-xxl` class for an XXL button.
  //
  // Markup:
  // <button type="button">Button</button>
  // <button type="button" class="button-xxl">XXL Button</button>
  //
  // Styleguide Components.Buttons.Sizes.XXL
  //
  // Weight: 4
  &.button-xxl {
    font-size: $font-size-xxl;
  }

  // Full-Width Button
  //
  // Add a `.button-full-width` class for a button 100% of the width of its container.
  //
  // Markup:
  // <button type="button" class="button-full-width">Full-Width Button</button>
  //
  // Styleguide Components.Buttons.Sizes.FullWidth
  //
  // Weight: 5
  &.button-full-width {
    width: 100%;
  }

  // Button Alignment
  //
  // Styleguide Components.Buttons.Alignment
  //
  // Weight: 3

  // Centered Button
  //
  // Add a `.button-centered` class for a button that will be centered on its own line.
  //
  // Markup:
  // <button type="button" class="button-centered">Centered Button</button>
  //
  // Styleguide Components.Buttons.Alignment.Centered
  //
  // Weight: 1
  &.button-centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  // Right-Aligned Button
  //
  // Add a `.button-right` class for a button that will be right-aligned on its own line.
  //
  // Markup:
  // <button type="button" class="button-right">Right-Aligned Button</button>
  //
  // Styleguide Components.Buttons.Alignment.RightAligned
  //
  // Weight: 2
  &.button-right {
    display: block;
    margin-left: auto;
  }

  // Icons on Buttons
  //
  // You can add icons to `<button>` and  `<a>` buttons (but not `<input>` buttons). They can be placed alone, before, after, or even in the middle of the button text.
  //
  // You will likely need to add margins to the icons for things to look right, which can be done easily in the markup using our spacing classes as shown below.
  //
  // <aside class="panel state-warning">
  //
  // # Accessibility Note
  // If you use *only* an icon, **always include hidden text describing the action** so that anyone using a screenreader can understand what the button does.
  //
  // </aside>
  //
  // Markup:
  // <button type="button"><span class="icon icon-l"><svg><use xlink:href="/assets/icons/symbol/icons.svg#save"></use></svg></span><span class="visually-hidden">Save</span></button>
  // <button type="button"><span class="icon icon-l margin-right-half"><svg><use xlink:href="/assets/icons/symbol/icons.svg#download"></use></svg></span>Download</button>
  // <button type="button">Edit<span class="icon icon-l margin-left-half"><svg><use xlink:href="/assets/icons/symbol/icons.svg#edit"></use></svg></span></button>
  // <button type="button">Search<span class="icon icon-l margin-left-half margin-right-half"><svg><use xlink:href="/assets/icons/symbol/icons.svg#search"></use></svg></span>Now</button>
  //
  // Styleguide Components.Buttons.WithIcons
  //
  // Weight: 4

  // Colored Buttons
  //
  // Styleguide Components.Buttons.Colors
  //
  // Weight: 1

  // Primary Button
  //
  // Add a `.button-primary` class for a button that will be trigger the *primary* action on a page.
  //
  // Markup:
  // <button type="button" class="button-primary">Primary Button</button>
  //
  // Styleguide Components.Buttons.Colors.Primary
  //
  // Weight: 1
  &.button-primary {
    border-color: transparent;
    background-color: $color-theme-dark-background-alt;
    color: $color-theme-dark-text;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-theme-dark-background;
      color: $color-theme-dark-text;

      .on-dark & {
        border-color: $color-theme-dark-text;
      }
    }
  }

  // Light Primary Button
  //
  // Use the `.button-primary-light` class if you need a lighter *primary* button.
  //
  // Markup:
  // <button type="button" class="button-primary-light">Light Primary Button</button>
  //
  // Styleguide Components.Buttons.Colors.LightPrimary
  //
  // Weight: 2
  &.button-primary-light {
    border-color: transparent;
    background-color: color(cyan, 90);
    color: color(cyan, 20);

    &:active,
    &:focus,
    &:hover {
      background-color: color(cyan, 70);

      .on-dark & {
        border-color: $color-theme-dark-text;
      }
    }
  }

  // Dark Primary Button
  //
  // Use the `.button-primary-dark` class if you need a darker *primary* button.
  //
  // Markup:
  // <button type="button" class="button-primary-dark">Dark Primary Button</button>
  //
  // Styleguide Components.Buttons.Colors.DarkPrimary
  //
  // Weight: 3
  &.button-primary-dark {
    border-color: transparent;
    background-color: $color-theme-dark-background;
    color: $color-theme-dark-text;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-theme-dark-background-alt;
      color: $color-theme-dark-text;

      .on-dark & {
        border-color: $color-theme-dark-text;
      }
    }
  }

  // Success Button
  //
  // Add a `.button-success` class to call attention to a positive action such as saving a search or downloading data.
  //
  // Markup:
  // <button type="button" class="button-success">Success Button</button>
  //
  // Styleguide Components.Buttons.Colors.Success
  //
  // Weight: 4
  &.button-success {
    background-color: $color-state-success-link;
    border-color: transparent;
    color: color(white);

    &:active,
    &:focus,
    &:hover {
      background-color: color(green, 40);
    }
  }

  // Light Success Button
  //
  // Use the `.button-success-light` class if you need a lighter *success* button.
  //
  // Markup:
  // <button type="button" class="button-success-light">Light Success Button</button>
  //
  // Styleguide Components.Buttons.Colors.LightSuccess
  //
  // Weight: 5
  &.button-success-light {
    border-color: transparent;
    background-color: color(green, 90);
    color: color(green, 20);

    &:active,
    &:focus,
    &:hover {
      background-color: color(green, 70);

      .on-dark & {
        border-color: $color-theme-dark-text;
      }
    }
  }
  // Cancel Button
  //
  // Add a `.button-cancel` class for an action that requires caution before being triggered, such as:
  //
  // * Canceling a form (any data the user has entered will be lost).
  // * Deleting a user setting or a saved search.
  //
  // Markup:
  // <button type="button" class="button-cancel">Cancel Button</button>
  //
  // Styleguide Components.Buttons.Colors.Cancel
  //
  // Weight: 6
  &.button-cancel {
    background-color: $color-state-error-link;
    border-color: transparent;
    color: color(white);

    &:active,
    &:focus,
    &:hover {
      background-color: color(red, 20);
    }
  }

  // Light Cancel Button
  //
  // Use the `.button-cancel-light` class if you need a lighter *cancel* button.
  //
  // Markup:
  // <button type="button" class="button-cancel-light">Light Cancel Button</button>
  //
  // Styleguide Components.Buttons.Colors.LightCancel
  //
  // Weight: 7
  &.button-cancel-light {
    border-color: transparent;
    background-color: color(red, 90);
    color: color(red, 20);

    &:active,
    &:focus,
    &:hover {
      background-color: color(red, 70);

      .on-dark & {
        border-color: $color-theme-dark-text;
      }
    }
  }

  &.button-warning {
    background-color: $color-state-warning-link;
    border-color: transparent;
    color: color(white);

    &:active,
    &:focus,
    &:hover {
      background-color: color(orange, 20);
    }
  }

  &.button-warning-light {
    border-color: transparent;
    background-color: color(orange, 90);
    color: color(orange, 20);

    &:active,
    &:focus,
    &:hover {
      background-color: color(orange, 70);

      .on-dark & {
        border-color: $color-theme-dark-text;
      }
    }
  }

  &.button-close {
    background-color: color(black, 0, 10);
    border: 0;
    color: color(black, 0, 50);
    font-size: $font-size-xl;
    padding: $space-xs;
    position: absolute;
    right: 0;
    top: 0;

    &:active,
    &:focus,
    &:hover {
      color: color(black, 0, 70);
    }
  }
}