@import '../view/ui/common-variables';

.btn-gray {
  color: @gray-darker;
  background-color: #eee;
  border-color: transparent;
  transition: all 0.25s ease;

  &:hover, &:focus {
    background-color: #ccc;
    color: @gray-darker;
  }

  &.active, &.selected {
    background-color: @gray-darker;
    color: #fff;
    &:hover, &:focus {
      background-color: darken(@gray-darker, 5%);
    }
    &:active {
      background-color: darken(@gray-darker, 10%);
    }
  }

  &:active {
    background-color: darken(@gray-darker, 10%);
    color: #fff;
  }

  &.disabled, &.disabled:hover {
    opacity: 0.5;
    color: @gray;
    pointer-events: none;
  }

}

.btn-bw {
  color: @gray-darker;
  background-color: #fff;

  &:hover, &:focus, &.inverse {
    background-color: @gray-darker;
    color: #fff;
  }

  &:active, &.inverse:hover, &.inverse:focus {
    background-color: @gray-base;
    color: #fff;
  }

  &.inverse.darker {
    background-color: @gray-base;
    &:hover, &:focus {
      color: @gray-lighter;
    }
  }

  &.inverse:active {
    background-color: black;
  }

  &.active {
    background-color: @gray-base;
    color: #fff;
    &:hover, &:focus {
      background-color: darken(@gray-base, 5%);
    }
    &:active {
      background-color: darken(@gray-base, 10%);
    }
  }

  &.disabled, &.disabled:hover {
    opacity: 0.5;
    pointer-events: none;
    color: @gray-lighter;
  }

}

// adding for drag area background,
// so .alert-danger and .alert-success
// can override
.alert-gray {
  background-color: #eee;
  border-color: @gray-darker;
  color: @gray-darker;
}

.btn-clear {
  color: @Calcite_Gray_550;
  background-color: transparent;
  cursor: pointer;

  &.lighter {
    color: @gray-dark;
  }

  &.lightest {
    color: #fff;
    &:hover, &:focus {
      color: @gray-lighter;
    }
    &:active {
      color: @gray-light;
    }
  }

  &:focus, &.active:focus {
    outline-width: thin;
    outline-color: @link-color;
  }

  &:hover, &:focus {
    color: @gray-darker;
  }

  &.active, &.selected {
    color: @gray-base;
    &:hover, &:focus {
      color: darken(@gray-base, 10%);
    }
  }

  &:active {
    color: #000;
  }

  &.active, &.selected, &:active {
    box-shadow: none;
  }

  &.disabled, &.disabled:hover {
    opacity: 0.5;
    color: @gray;
    pointer-events: none;
  }

}

.btn-bright {
  color: @btn-primary-color !important;
  background-color: @link-color;
  border-color: darken(@link-color, 5%);

  &:hover,
  &:focus {
    background-color: @link-hover-color;
    border-color: darken(@link-hover-color, 5%);
  }

  &:active {
    background-color: darken(@link-hover-color, 5%);
    border-color: darken(@link-hover-color, 10%);
  }
}

/*
 * Close/cancel button (style updated in Dec 2017)
 */

.btn-naked {
  background-color: #eee;
  color: @Calcite_Gray_550;

  &:hover, &:active, &:focus {
    background-color: #ccc;
    color: @Calcite_Gray_550;
  }
}

.tooltip-bright {

  .tooltip-inner {
    background-color: @link-color;
    color: @btn-primary-color;
  }

  &.bottom .tooltip-arrow {
    border-bottom-color: @link-color;
  }

  &.right .tooltip-arrow {
    border-right-color: @link-color;
  }

  &.left .tooltip-arrow {
    border-left-color: @link-color;
  }

  &.top .tooltip-arrow {
    border-top-color: @link-color;
  }

}

.tooltip-danger {

  .tooltip-inner {
    background: fade(@sm-brand-danger, 95%);
    color: @btn-danger-color;
  }

  &.bottom .tooltip-arrow {
    border-bottom-color: fade(@sm-brand-danger, 95%);
  }

  &.right .tooltip-arrow {
    border-right-color: fade(@sm-brand-danger, 95%);
  }

  &.left .tooltip-arrow {
    border-left-color: fade(@sm-brand-danger, 95%);
  }

  &.top .tooltip-arrow {
    border-top-color: fade(@sm-brand-danger, 95%);
  }

}

.blue-text {
  color: @link-color;
  font-weight: bold;
}

.white-text {
  color: white;
}

.small-text {
  font-size: 0.9em;
  line-height: 150%;
  margin-top: 10px;
}

.text-margins {
  margin: 0 0.5em;
}

// TODO: I worry this is too specific a selector for just a link.
.theme-contrast-light .section-layout-sequence a {
  color: @lighter-link;
  &:hover, &:active {
    color: @lighter-link-hover;
  }
}

#fatalError > table {
  border: 2px solid @link-color;
}
