// ---
// title: Buttons
// description: These are the default button styles. `!important` is used on colors so override default colors.
// ---

%#{$namespace}button,
.#{$namespace}button {
  box-sizing: content-box;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  margin: 0;
  line-height: map-fetch($button, size base height);
  border-width: 1px;
  border-style: solid;
  font-size: map-fetch($button, size base font-size);
  font-weight: map-fetch($button, size base font-weight);
  border-radius: map-fetch($button, size base border-radius);
  height: map-fetch($button, size base height);
  padding: map-fetch($button, size base padding);

  // Unique styles for the base button start here.
  background-color: map-fetch($button, type base background);
  border-color: map-fetch($button, type base border);
  color: map-fetch($button, type base color);

  &:visited {
    color: map-fetch($button, type base color);
  }

  &:hover {
    box-shadow: map-fetch($button, type base hover box-shadow);
  }

  &.is-active,
  &:active {
    background: map-fetch($button, type base active background);
    border-color: map-fetch($button, type base active border);
    color: map-fetch($button, type base active color);
    box-shadow: map-fetch($button, type base active box-shadow);
    text-shadow: map-fetch($button, type base active text-shadow);
  }

  &--highlight {
    background-color: map-fetch($button, type highlight background);
    border-color: map-fetch($button, type highlight border);
    color: map-fetch($color, text white);
    text-shadow: map-fetch($button, type highlight text-shadow);

    &:hover {
      background: map-fetch($button, type highlight hover background);
      border-color: map-fetch($button, type highlight hover border);
    }

    &:active {
      background: map-fetch($button, type highlight active background);
      border-color: map-fetch($button, type highlight active border);
      box-shadow: map-fetch($button, type highlight active box-shadow);
    }

    &:visited,
    &:hover,
    &:active,
    &:focus {
      color: map-fetch($color, text white);
    }
  }

  &--outline {
    background-color: map-fetch($button, type outline background);
    border-color: map-fetch($button, type outline border);
    color: map-fetch($button, type outline color);

    &:visited {
      color: map-fetch($button, type outline color);
    }

    &:hover {
      background-color: map-fetch($button, type outline background);
      border-color: map-fetch($button, type outline hover border);
      color: map-fetch($button, type outline hover color);
      text-shadow: none;
      box-shadow: none;
    }

    &:active {
      background-color: map-fetch($button, type outline background);
      border-color: map-fetch($button, type outline active border);
      color: map-fetch($button, type outline active color);
      text-shadow: none;
      box-shadow: none;
    }
  }

  &--outline-reverse {
    background-color: map-fetch($button, type outline-reverse background);
    border-color: map-fetch($button, type outline-reverse border);
    color: map-fetch($button, type outline-reverse color);

    &:visited {
      color: map-fetch($button, type outline-reverse color);
    }

    &:hover {
      background: map-fetch($button, type outline-reverse hover background);
      border-color: map-fetch($button, type outline-reverse hover border);
      color: map-fetch($button, type outline-reverse hover color);
    }

    &:active {
      background: map-fetch($button, type outline-reverse active background);
      border-color: map-fetch($button, type outline-reverse active border);
      color: map-fetch($button, type outline-reverse active color);
    }
  }

  &--danger {
    background-color: map-fetch($button, type danger background);
    border-color: map-fetch($button, type danger border);
    color: map-fetch($color, text white);
    text-shadow: map-fetch($button, type danger text-shadow);

    &:hover {
      background: map-fetch($button, type danger hover background);
      border-color: map-fetch($button, type danger hover border);
    }

    &:active {
      background: map-fetch($button, type danger active background);
      border-color: map-fetch($button, type danger active border);
    }

    &:visited,
    &:hover,
    &:active,
    &:focus {
      color: map-fetch($color, text white);
    }
  }

  &--plain {
    color: map-fetch($button, type plain color);
    border-color: transparent;
    background-color: transparent;
    text-shadow: none;
    box-shadow: none;

    &:hover {
      color: map-fetch($button, type plain hover color);
    }

    &:active {
      color: map-fetch($button, type plain active color);
    }

    &:visited,
    &:hover,
    &:active,
    &:focus {
      border-color: transparent;
      background-color: transparent;
      text-shadow: none;
      box-shadow: none;
    }
  }

  &--toggle {

    &:hover {
      color: map-fetch($button, type base color);
    }

    &:active,
    &.is-active:hover {
      color: map-fetch($button, type base active color);
    }

    &:not(:hover):not(.is-active) {
      border-color: transparent;
      background-color: transparent;
    }
  }

  // ### Button Sizes
  // Button size variations.

  &--small {
    font-size: map-fetch($button, size small font-size);
    font-weight: map-fetch($button, size small font-weight);
    border-radius: map-fetch($button, size small border-radius);
    line-height: map-fetch($button, size small height);
    height: map-fetch($button, size small height);
    padding: map-fetch($button, size small padding);
  }

  &--large {
    font-size: map-fetch($button, size large font-size);
    font-weight: map-fetch($button, size large font-weight);
    border-radius: map-fetch($button, size large border-radius);
    line-height: map-fetch($button, size large height);
    height: map-fetch($button, size large height);
    padding: map-fetch($button, size large padding);
  }

  &--full {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
  }

  // ### With Icon
  // Some extra help is needed to get the icon and text to line up.

  &--icon {
    line-height: 1.4;

    .#{$namespace}icon {
      vertical-align: sub;
    }
  }

  // ### Disabled State
  // Used either an attribute or a class, depending on the use case.

  // ### Disabled State
  // Used either an attribute or a class, depending on the use case.

  &[disabled],
  &--disabled,
  &--disabled:visited,
  &--disabled:hover,
  &--disabled:active,
  &--disabled:focus {
    cursor: default;
    box-shadow: none;
    background-color: map-fetch($button, type disabled background);
    border-color: map-fetch($button, type disabled border);
    color: map-fetch($button, type disabled color);
    text-shadow: none;
    box-shadow: none;

    &.#{$namespace}button--plain, {
      background-color: transparent;
      border-color: transparent;
    }

    &.#{$namespace}button--outline-reverse, {
      background-color: transparent;
    }
  }
}