// Buttons
//
//  - A `<button>` tag does not need anything special to work. Use `<button>` when you can, but it is possible to use other elements as long as you add `role="button"` and add JavaScript to replicate the button functionality.
//  - Just like links, you can add `class="visuallyhidden"` with descriptive text to give more context to the button's purpose.
//  - If a button contains an <code>&lt;img&gt;</code> element, make sure to set its `alt` attribute. If it contains an icon, use `aria-label` to describe the icon instead.
//  - You can use <code>&lt;input type=&quot;image&quot;&gt;</code> to make a graphical button. It takes a `src` and `alt` attribute just like traditional images.
//  - Button states are important, not just button styling! If you are only toggling classes to visually manage state of your components, you are likely not appropriately conveying that state to users of assistive technologies.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#button_res">Resources</a></h3><div id="button_res" class="atblock__panel"><ul><li><a href="https://www.deque.com/blog/accessible-aria-buttons" target="_blank">Building Accessible Buttons with ARIA</a></li><li><a href="https://css-tricks.com/user-facing-state/" target="_blank">User Facing State</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" target="_blank">Using the button role</a></li><li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html" target="_blank">W3C Button Examples</a></li></ul></div></section>
//
//
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#button_guide">WCAG 2.1 Guidelines</a></h3><div id="button_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#text-equiv-all" target="_blank">1.1.1 Non-text Content</a> - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)<br><br><strong>Note:</strong> If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.</p></div><div class="markup"></div></section>
//
//
//
// Markup: buttons.twig
//
// Style guide: General.buttons

// Import site utilities.
@import '../../global/utils/init';

button {
  @include button;
  -webkit-appearance: inherit; // sass-lint:disable-line no-vendor-prefixes

  [role='button'][aria-pressed='true'] {
    color: $color-white;
    background: $color-manatee;
  }
}

[type='submit'],
[role='button'] {
  @include button;
  min-height: inherit;
}

button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: inherit; // sass-lint:disable-line no-vendor-prefixes
}

.button {
  @include button;
  line-height: 0.9;
}

.button--outline {
  @include button-outline;

  &.magnifyingglass {
    vertical-align: middle;
  }
}

.buttons--center {
  text-align: center;
  clear: both;
}

.buttons--right {
  text-align: right;
  clear: both;
}

.buttons--left {
  text-align: left;
  clear: both;
}

.button-icon {
  @include button;
  line-height: 1.2;
  padding: 0.8rem $padding-md 0.8rem ($padding-md + $padding-xsm);
  height: 48px;

  &::before {
    float: left;
    text-align: center;
    font-size: 1.5rem;
    margin: -0.25rem $padding-xsm $padding-xsm (-$padding-sm);
    padding: 0 0.2rem;
    pointer-events: none;
  }

  &.button--outline {
    @include button-outline;
    line-height: 1.3;
    padding: 0.8rem $padding-md 0.8rem ($padding-md + $padding-xsm);
  }

  &.heart {

    &::before {
      content: '\2764';
      color: $color-ballet-slipper;
    }

    &:hover::before {
      color: $color-sea-glass;
    }
  }

  &.wheelchair {

    &::before {
      content: '\267F';
      color: $color-midnight;
    }
  }
}

.magnifyingglass {
  margin: -$padding-xsm $padding-sm;
  width: 28px;

  &:hover,
  &:active {
    opacity: 0.6;
  }
}

.button[aria-pressed='true'],
.button-icon[aria-pressed='true'] {
  background: $color-grass;
  color: $color-midnight;

  &:focus {
    background: $color-grass;
    color: $color-midnight;
  }
}

.button-hover {
  background-color: $color-ruby;
  border: 3px solid $color-ruby;
  text-decoration: underline;
}

.button-active,
.button-focus {
  background-color: $color-blood;
  border: 3px solid $color-blood;
  text-decoration: underline;
}

.button-disabled,
button[disabled],
:disabled {
  background-color: $color-manatee;
  border: 3px solid $color-manatee;
  pointer-events: none;
}
