// Table of Contents
// ==================================================
// Button
// Colors
// Styles
// Sizes
// Groups
// Data Toggles
// Media Queries

// scss-lint:disable NestingDepth

// Button
// ==================================================
.btn {
  @include appearance(none);
  @include transition(all 0.3s ease-in-out);
  background: color(haze);
  border: 1px solid color(haze);
  border-radius: border-radius(b);
  box-sizing: border-box;
  color: color(slate);
  cursor: pointer;
  display: inline-block;
  font-size: text-size(b);
  font-weight: text-weight(normal);
  line-height: 1;
  padding: 12px 20px 14px;
  text-align: center;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;

  @if ($pseudo-elements) {
    &:hover,
    &.active,
    &:focus {
      background: darkish-color(haze);
      border-color: darkish-color(haze);
    }
    &:active,
    &.disabled,
    &[disabled] {
      background: lightish-color(haze);
      border-color: lightish-color(haze);
      color: transparentize(color(slate), 0.35);
    }
    &.disabled,
    &[disabled] { cursor: not-allowed; }
  }

  .badge,
  .label {
    font-size: text-size(xxxs);
    padding: 2px 1px 1px;
    min-width: 9px;
    vertical-align: top;
  }

  img,
  svg {
    height: 1em;
    vertical-align: text-top;
  }
}

// Colors
// ==================================================
@each $name, $color in map-keys($colors) {
  .btn-color-#{$name} {
    background: color($name);
    border-color: color($name);
    color: text-color-on($name);

    &.btn-link,
    &.btn-outline { color: color($name); }
    &.btn-link {
      @if ($pseudo-elements) {
        &:hover,
        &.active,
        &:focus { color: darkish-color($name); }
        &:active,
        &.disabled,
        &[disabled] { color: lightish-color($name); }
      }
    }
    &.btn-outline {
      border-color: color($name);

      @if ($pseudo-elements) {
        &:hover,
        &:active,
        &.active,
        &:focus,
        &.disabled,
        &[disabled] {
          background: darkish-color($name);
          border-color: darkish-color($name);
          color: text-color-on($name);
        }
        &.disabled,
        &[disabled] {
          background: color(transparent);
          color: color($name);
        }
      }
    }

    @if ($pseudo-elements) {
      &:hover,
      &.active,
      &:focus {
        background: darkish-color($name);
        border-color: darkish-color($name);
      }
      &:active,
      &.disabled,
      &[disabled] {
        background: lightish-color($name);
        border-color: lightish-color($name);
        color: transparentize(text-color-on($name), 0.35);
      }
    }
  }
}

// Styles
// ==================================================
.btn-link,
.btn-outline {
  background: color(transparent);

  @if ($pseudo-elements) {
    .disabled,
    &[disabled] { background: inherit; }
  }
}
.btn-link {
  border: 0;
  border-radius: 0;
  padding: 0;

  @if ($pseudo-elements) {
    &:hover,
    &:active,
    &.active,
    &:focus,
    &.disabled,
    &[disabled] { background: inherit; }
  }
}
.btn-block {
  display: block;
  min-width: 100%;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

// Sizes
// ==================================================
.btn-size-l,
.btn-size-m { font-size: text-size(m); }
.btn-size-l { padding: 21px 30px; }
.btn-size-m { padding: 16px 25px; }
.btn-size-s {
  font-size: text-size(s);
  padding: 8px 15px 9px;
}
.btn-icon {
  min-width: 44px;
  padding: 13px 0;

  &.btn-size-l,
  &.btn-size-m { font-size: text-size(l); }
  &.btn-size-l {
    min-width: 62px;
    padding: 20px 0;
  }
  &.btn-size-m {
    min-width: 52px;
    padding: 15px 0;
  }
  &.btn-size-s {
    min-width: 33px;
    padding: 8.5px 0;
  }
  &.btn-link { padding: 0; }
}

// Groups
// ==================================================
.btn-group {
  border-collapse: separate;
  display: table;
  position: relative;
  table-layout: fixed;
  white-space: nowrap;
  vertical-align: middle;

  > .btn {
    border-radius: 0;
    margin-left: -1px;
    position: relative;

    &:hover,
    &:active,
    &.active,
    &:focus { z-index: 2; }
    &:first-child {
      border-bottom-left-radius: border-radius(b);
      border-top-left-radius: border-radius(b);
      margin-left: 0;
    }
    &:last-child,
    &.dropdown-toggle {
      border-bottom-right-radius: border-radius(b);
      border-top-right-radius: border-radius(b);
    }
  }

  + .btn-group { margin-left: 5px; }
  &.pull-right + .btn-group.pull-right {
    margin-right: 10px;
    margin-left: 0;
  }
}
.btn-group-vertical {
  > .btn {
    display: block;
    margin-left: 0;
    margin-top: -1px;
    width: 100%;

    &:first-child {
      border-radius: 0;
      border-top-right-radius: border-radius(b);
      border-top-left-radius: border-radius(b);
      margin-top: 0;
    }
    &:last-child,
    &.dropdown-toggle {
      border-radius: 0;
      border-bottom-right-radius: border-radius(b);
      border-bottom-left-radius: border-radius(b);
    }
  }
}
.btn-group-block {
  border-collapse: separate;
  display: table;
  table-layout: fixed;
  width: 100%;

  > .btn {
    padding-left: 0;
    padding-right: 0;
  }

  &:not(.btn-group-vertical) {
    > .btn {
      border-right-width: 0;
      display: table-cell;
      width: 1%;

      &:last-child { border-right-width: 1px; }
    }
  }

  &.dropdown,
  &.dropup {
    display: block;
    table-layout: auto;

    > .btn {
      display: block;
      width: 100%;
    }
  }
}

// Data Toggles
// ==================================================
[data-toggle='buttons'] {
  .btn {
    input[type='checkbox'],
    input[type='radio'] {
      opacity: 0;
      position: absolute;
      z-index: -1;
    }
  }
}

// Media Queries
// ==================================================
@media only screen and (max-width: 767px) {
  .btn-block-responsive {
    display: block;
    min-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  .btn-group-responsive {
    > .btn {
      border-radius: 0;
      display: block;
      margin-left: 0;
      margin-top: -1px;
      width: 100%;

      &:first-child {
        border-top-right-radius: border-radius(b);
        border-top-left-radius: border-radius(b);
        margin-left: 0;
      }
      &:last-child,
      &.dropdown-toggle {
        border-bottom-right-radius: border-radius(b);
        border-bottom-left-radius: border-radius(b);
      }
    }

    &.btn-group-vertical {
      > .btn {
        display: inline-block;
        margin-left: -1px;
        margin-top: 0;
        max-width: initial;
        width: initial;

        &:first-child {
          border-bottom-left-radius: border-radius(b);
          border-top-right-radius: 0;
          border-top-left-radius: border-radius(b);
        }
        &:last-child,
        &.dropdown-toggle {
          border-bottom-right-radius: border-radius(b);
          border-bottom-left-radius: 0;
          border-top-right-radius: border-radius(b);
        }
      }
    }
    &.btn-group-block {
      > .btn {
        border-radius: 0;
        border-right-width: 1px;
        display: block;
        margin-left: 0;
        margin-top: -1px;
        width: 100%;

        &:first-child {
          border-top-right-radius: border-radius(b);
          border-top-left-radius: border-radius(b);
          margin-left: 0;
        }
        &:last-child,
        &.dropdown-toggle {
          border-bottom-right-radius: border-radius(b);
          border-bottom-left-radius: border-radius(b);
        }
      }

      &.btn-group-vertical {
        > .btn {
          border-right-width: 0;
          display: table-cell;
          width: 1%;

          &:first-child {
            border-bottom-left-radius: border-radius(b);
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            border-top-left-radius: border-radius(b);
          }
          &:last-child,
          &.dropdown-toggle {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: border-radius(b);
            border-right-width: 1px;
            border-top-left-radius: 0;
            border-top-right-radius: border-radius(b);
          }
        }
      }
    }
  }
}