/* stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type, selector-max-id, scss/at-extend-no-missing-placeholder */

@import 'base/scss/vendor/bootstrap/buttons';
@import 'base/scss/vendor/bootstrap/button-groups';
@import 'base/scss/vendor/bootstrap/modals';
@import 'bootstrap/overrides/style/buttons';

$button-border-radius: 2px;

%btn-civi {
  @extend .btn;
  font-family: $font-family-base;
  font-size: $font-size-base;
  opacity: 1;
  text-shadow: none;
  text-transform: uppercase;
}

%btn-civi-primary {
  @extend .btn-primary;
  border: 0;
  min-width: 90px;
  padding: 8px 12px;
}

%btn-civi-secondary-outline {
  border-radius: $button-border-radius;
}

.crm-container {

  // "Toolbar" buttons
  $toolbar-top-space: 6px;
  margin-left: 0 !important;

  %btn {
    @extend %btn-civi;

    /**
     * :not(.ui-dialog .button) is used to do not apply the selector .btn-secondary-outline
     * on modal's buttons.
     */
    &:not(.crm-form-submit):not(.crm-close-accordion):not(.crm-clear-link):not(.ui-button):not(.button.newGroup) {
      @extend %btn-civi-secondary-outline;
    }

    &.crm-form-submit:not(.cancel) {
      @extend %btn-civi-primary;
    }
  }

  #actions,
  #crm-main-content-wrapper div.action-link {
    %btn {
      @extend .btn-secondary;
    }
  }

  input.crm-form-submit {
    background: $brand-primary;
    border-color: $brand-primary;
    border-radius: $border-radius-base;
    font-family: $font-family-base;
    margin-right: 0;
    padding: 8px 12px;
    text-shadow: none;
    text-transform: uppercase;

    &:not(:last-child) {
      margin-right: 10px;
    }

    &:hover {
      background: darken($brand-primary, $crm-darken-percentage);
    }

    &:active,
    &:focus {
      outline: none;
    }

    &.cancel {
      background: $crm-white;
      border: 1px solid $crm-copy;
      color: $crm-cancel-color;

      &:hover {
        background: $crm-copy;
        color: $crm-white;
      }
    }
  }

  .crm-button-type-cancel {
    i {
      color: $crm-cancel-color;
    }

    &:hover {
      i {
        color: $crm-white;
      }
    }

    input.crm-form-submit {
      color: $crm-cancel-color !important;

      &:hover {
        color: $crm-white !important;
      }
    }
  }

  .crm-submit-buttons {
    height: auto;
    margin: 0;
    padding: 20px;

    .crm-button {
      float: none !important;
      margin-left: 0;
      margin-right: 0;

      &:not(:last-child) {
        margin-right: 10px;
      }
    }

    span.crm-button {
      display: inline-block;
    }

    a.button {
      float: none;
    }
  }

  .crm-form-block {
    &.crm-search-form-block > .crm-submit-buttons,
    &.crm-form-block > .crm-submit-buttons,
    .form-item > .crm-submit-buttons {
      @include civicrm-submit-buttons;
    }

    .crm-submit-buttons {
      background: $crm-white !important;

      .crm-i {
        display: none;
      }

      .crm-button-type-cancel,
      .crm-button-type-back {
        input {
          border: solid 1px $gray-dark;
          ///The default theme uses "!important"
          color: $crm-cancel-color !important;

          &:hover {
            background: darken($crm-copy, $crm-darken-percentage);
            color: $crm-white !important;
          }
        }
      }
    }
  }

  .crm-i-button,
  .refresh {
    padding: 0 !important;
  }

  .crm-button {
    background: none;
  }

  table.form-layout > tbody > tr > td > span.crm-button.crm-i-button {
    line-height: 35px;
  }

  #crm-submit-buttons input.crm-form-submit,
  .crm-button input.crm-form-submit,
  .crm-hover-button,
  .ui-dialog-buttonset .ui-button,
  a.button,
  a.button:link,
  a.button:visited,
  input[type=button] {
    @extend %btn;
  }

  .crm-hover-button.crm-i {
    font-family: $font-family-fontawesome !important;
  }

  input[type=button],
  a.button,
  a.button:link,
  a.button:visited {
    background: $gray-dark;
    color: $crm-white;

    &:hover,
    &:focus,
    &:active {
      background: darken($crm-copy, $crm-darken-percentage);
      color: $crm-white;
    }
  }

  .crm-option-edit-link.crm-hover-button,
  .crm-hover-button:not(#addMorePermission):not(.open-inline-noreturn),
  .crm-clear-link {
    border: 0 !important;
    margin: 0 !important;
  }

  a.crm-selection-reset {
    &,
    &:link {
      color: $gray-dark;
    }
  }

  .crm-accordion-header,
  .crm-form-date-wrapper {
    a.crm-hover-button {
      @extend .btn-xs;
    }
  }

  a.crm-hover-button {
    border-radius: 2 !important;
    padding: 4px 6px;

    &.css_right {
      padding: 7px 12px;
    }

    &.crm-close-accordion {
      padding: 7px 15px !important;
    }

    &:hover {
      background-image: none;
      color: inherit;
    }
  }

  .crm-button-type-refresh,
  .crm-submit-buttons > .crm-button {
    border: 0;

    .crm-i {
      background-color: transparent !important;
      color: $crm-white;
      padding: 2px 3px;
      top: 0;
    }
  }

  .crm-i {
    line-height: inherit;
    text-shadow: none;
    vertical-align: middle;
  }

  .crm-button-type-refresh {
    .crm-i {
      color: $crm-white;
    }
  }

  .crm-form-block > .crm-submit-buttons {
    margin-left: 0;
    min-height: 0;
  }

  //"Expand all" and "configure pane" buttons;
  .crm-search-form-block > a,
  .crm-search-form-block > span {
    @extend .btn;
    border: 0;
    box-sizing: border-box;
    line-height: 26px;
  }

  .crm-search-form-block > a {
    margin-right: 10px;
  }

  .crm-search-form-block > span {
    overflow: hidden;

    > a {
      &::before {
        @include fa-icon($font-size-base, $fa-var-expand, $brand-primary);
        display: inline-block;
        line-height: 30px;
        width: 30px;
      }

      &[href~='#collapse']::before {
        content: $fa-var-compress;
      }
    }
  }

  .action-link {
    height: auto;

    a {
      display: inline-block !important;
      float: none !important;

      &.button {
        box-shadow: $crm-form-layout-shadow;
      }
    }

    .crm-i {
      line-height: normal !important;
    }

    &:not(:first-of-type) a {
      vertical-align: bottom !important;
    }
  }

  &.ui-dialog {
    .button {
      font-weight: normal !important;
      padding: 4px 12px !important;
    }

    .ui-dialog-buttonset {
      .crm-i {
        line-height: initial !important;
      }

      .ui-button-text-icon-primary .ui-button-text {
        padding: 0 0 0 7px !important;
      }
    }
  }

  .crm-profile-selector-preview,
  .crm-profile-selector-edit,
  .crm-profile-selector-copy,
  .crm-profile-selector-create {
    border: 0;
    height: auto;
    line-height: normal;
    padding: 6px 12px;

    .crm-i {
      position: relative;
      top: -1px;
    }

    &:not([disabled]) {
      cursor: pointer;
    }

    &[disabled] {
      opacity: 0.65;
    }
  }
}

a {
  &.button {
    i {
      margin-top: -4px;
    }
  }
}

button {
  background: $brand-primary;
  border: 0;
  border-radius: $border-radius-base;
  color: $crm-white;
  font-family: $font-family-base;
  line-height: 1;
  padding: 11px 12px;
  text-shadow: none;
  text-transform: uppercase;
  vertical-align: middle;

  &:hover {
    background: darken($brand-primary, $crm-darken-percentage);
  }

  &:active,
  &:focus {
    outline: none;
  }

  &.cancel {
    background: $crm-white;
    border: 1px solid $crm-copy;
    color: $crm-cancel-color;

    &:hover {
      background: $crm-copy;
      color: $crm-white;
    }
  }
}

// We style only plain buttons which are <div>s/<button>s with `crm-button` class
// and do *not* have `crm-button-type-*` class. <span>s should not be touched.
// We do *not* extend to `%btn-civi` because we want the height to be preserved.
// Because of that we need to additionally discard the text shadow though.
*:not(.crm-submit-buttons) {
  > div,
  > button {
    &.crm-button:not([class*='crm-button-type-']) {
      @extend %btn-civi-primary;
      text-shadow: none;
    }
  }
}

.crm-container span.crm-button {
  overflow: inherit;

  > .crm-i {
    margin-top: 7px;
  }
}