$btn-primary: #1269ba;
$btn-hover-overlay: #e9f1f8;
$btn-primary-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14),
  0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);

$btn-disabled: #eff0f0;

$btn-primary-hover: mix($btn-primary, $btn-hover-overlay, 84%);
$btn-secondary-hover: change-color($btn-primary, $alpha: 0.24);

.zuo-btn {
  display: inline-block;
  cursor: pointer;
  border-radius: 0.25rem;
  white-space: nowrap;
  padding: 0 0.9375rem; // 1rem total - .0625 border
  font-size: 0.875rem;
  line-height: 2.125rem; // 2.25 total - .125 for border
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  &:hover,
  &:focus {
    text-decoration: none;
  }
  /*primary btn - use for all call to actions (save, create, etc)*/
  &.primary {
    color: $neutral-4;
    background-color: $btn-primary;
    border: 1px solid $btn-primary;
    box-shadow: $btn-primary-shadow;
    &:hover:not(.disabled):not(:disabled),
    &:focus:not(.disabled):not(:disabled) {
      color: $neutral-4;
      background-color: $btn-primary-hover;
      border: 1px solid $btn-primary-hover;
      outline: none;
    }
  }
  /*secondary- cancel, etc*/
  &.secondary {
    background-color: $neutral-4;
    border: 1px solid $btn-primary;
    color: $btn-primary;

    &:hover:not(.disabled):not(:disabled),
    &:focus:not(.disabled):not(:disabled) {
      background-color: $btn-secondary-hover;
    }

    &.disabled,
    &:disabled {
      border-color: #d7dce1;
    }
  }
  /*danger button*/
  &.danger {
    border: 1px solid $support-4;
    background-color: $neutral-4;
    color: $support-4;
  }
  /*disabled btn*/
  &.disabled,
  &:disabled {
    background: $btn-disabled;
    border-color: $btn-disabled;
    color: rgba(0, 0, 0, 0.4);
    box-shadow: none;
  }
}

.zuo-btn-icon {
  padding-right: 0.375rem;
}

.table-btn {
  cursor: pointer;
  background-color: transparent;
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.5rem;
  margin: 0.5rem;
  border: none;
  color: $support-1;
  box-shadow: none;
  outline: none;

  &.active {
    // TODO: active style for grid/table toggle
    box-shadow: none;
  }

  &:hover {
    text-decoration: none;
    box-shadow: none;
  }

  &:focus {
    text-decoration: none;
  }

  &.disabled,
  &:disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #f1f2f4;
}

.btn-group.open .dropdown-toggle {
  box-shadow: none;
}

.btn-group-vertical > button {
  margin: 0px;
}

.btn-sign-in {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  &:hover,
  &:focus {
    color: white;
    background-color: #5b6a79;
    border-color: white;
  }
}

a.btn-clear {
  color: white;

  background-color: inherit !important;
  border-color: inherit !important;
  &:hover,
  &:focus {
    color: white !important;
    background-color: #9fb1bf !important;
    border-color: white !important;
  }
}

.btn-clear + .tooltip > .tooltip-inner {
  background-color: white;
  border: 1px solid;
  border-color: white;
  color: #394b5d;
}
.btn-clear + .tooltip > .tooltip-arrow {
  border-bottom-color: white;
}

a.back_buttons {
  float: right;
  i {
    padding-right: 2px;
  }
  &:hover,
  &:focus {
  }
}

.btn-arrow-right,
.btn-arrow-left {
  position: relative;
  padding-left: 18px;
  padding-right: 18px;
  border: 0px solid transparent;
}
.btn-arrow-right {
  padding-left: 36px;
}
.btn-arrow-left {
  padding-right: 36px;
}
.btn-arrow-right:before,
.btn-arrow-right:after,
.btn-arrow-left:before,
.btn-arrow-left:after {
  /* make two squares (before and after), looking similar to the button */
  content: "";
  position: absolute;
  top: 5px; /* move it down because of rounded corners */
  width: 22px; /* same as height */
  height: 22px; /* button_outer_height / sqrt(2) */
  background: inherit; /* use parent background */
  border: inherit; /* use parent border */
  border-left-color: transparent; /* hide left border */
  border-bottom-color: transparent; /* hide bottom border */
  border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
}
.btn-arrow-right:before,
.btn-arrow-right:after {
  transform: rotate(
    45deg
  ); /* rotate right arrow squares 45 deg to point right */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
.btn-arrow-left:before,
.btn-arrow-left:after {
  transform: rotate(
    225deg
  ); /* rotate left arrow squares 225 deg to point left */
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
}
.btn-arrow-right:before,
.btn-arrow-left:before {
  /* align the "before" square to the left */
  left: -11px;
  top: 2px;
}
.btn-arrow-right:after,
.btn-arrow-left:after {
  /* align the "after" square to the right */
  right: -11px;
  top: 2px;
}
.btn-arrow-right:after,
.btn-arrow-left:before {
  /* bring arrow pointers to front */
  z-index: 5;
}
.btn-arrow-right:before,
.btn-arrow-left:after {
  /* hide arrow tails background */
  background-color: white;
}