// New Button
//================================================== //

.btn-primary {
  border-radius: 8px;
  background-color: $button-color-primary-initial-background;
  border: 2px solid $button-color-primary-initial-background;
  color: $button-color-primary-initial-font;
  padding: 0 12px;

  &:hover {
    background-color: $button-color-primary-hover-background;
    border: 2px solid $button-color-primary-hover-background;
  }

  &:active {
    background-color: $button-color-primary-hover-background;
    border: 2px solid $button-color-primary-hover-background;
    box-shadow: none;
  }

  &:focus {
    border: 2px solid transparent;

    &:not(.hide-focus) {
      box-shadow: 0 0 0 2px $body-color-primary-background, 0 0 0 3px $button-color-primary-initial-background, $focus-box-shadow;
    }

    &:active {
      background-color: $button-color-primary-hover-background;
      box-shadow: none;
    }
  }

  &.destructive {
    background-color: $button-color-primary-destructive-initial-background-new;
    border: 2px solid $button-color-primary-destructive-initial-background-new;
    color: $ids-color-palette-white;

    &:focus:not(.hide-focus) {
      border-color: $button-color-destructive-focus-border-new;
      box-shadow: 0 0 0 2px $body-color-primary-background,
        0 0 0 3px $button-color-destructive-focus-border-new;
    }

    &:hover:not(:disabled) {
      background-color: $button-color-primary-destructive-hover-background-new;
      border: 2px solid $button-color-primary-destructive-hover-background-new;
    }
  }
}

.btn-primary[disabled]:not(.destructive):not(.btn-generative) {
  background-color: $button-color-primary-initial-background;
  border: 2px solid $button-color-primary-initial-background;
  color: $button-color-primary-initial-font;
  opacity: $button-disabled-opacity;

  svg.icon {
    color: $button-color-primary-initial-font;
  }

  &:hover {
    background-color: $button-color-primary-initial-background;
    border-color: $button-color-primary-initial-background;
    color: $button-color-primary-initial-font;

    svg.icon {
      color: $button-color-primary-initial-font;
    }
  }
}

.btn-secondary {
  background-color: transparent;
  border-radius: 8px;
  color: $button-color-secondary-initial-font-new;
  border: 1px solid $button-color-secondary-initial-border-new;
  padding: 0 12px;

  &.btn-menu {
    color: $button-color-secondary-initial-font-new;
    border-color: $button-color-secondary-initial-border-new;

    .icon {
      color: $button-color-secondary-initial-font-new;
    }

    &.is-open {
      background-color: $button-color-tertiary-hover-background-new;
      color: $button-color-secondary-menu-open-new;

      .icon {
        color: $button-color-secondary-menu-open-new;
      }
    }

    &:focus:not(.hide-focus) {
      box-shadow: unset;
    }
  }

  svg.icon {
    color: $button-color-secondary-initial-font-new;
  }

  &:hover {
    background-color: $button-color-secondary-hover-background-new;
    border: 1px solid $button-color-secondary-hover-border-new;
    color: $button-color-secondary-initial-font-new;
  }

  &:active {
    background-color: $button-color-secondary-hover-background-new;
    border: 1px solid $button-color-secondary-hover-border-new;
    color: $button-color-secondary-initial-font-new;
  }

  &:focus {
    border: 1px solid $button-color-secondary-hover-border-new;

    &:active {
      background-color: $button-color-secondary-hover-background-new;
      border: 1px solid $button-color-secondary-hover-border-new;
      color: $button-color-secondary-initial-font-new;
    }
  }

  &[disabled] {
    background-color: $button-color-secondary-initial-background;
    color: $button-color-secondary-initial-font-new !important;
    border: 1px solid $button-color-secondary-initial-border-new;
    opacity: 0.4;

    svg.icon,
    .icon {
      color: $button-color-secondary-initial-font-new !important;

      &:hover {
        color: $button-color-secondary-initial-font-new;
      }
    }

    &:hover {
      background-color: $button-color-secondary-initial-background;
      color: $button-color-secondary-initial-font-new;
      border: 1px solid $button-color-secondary-initial-border-new;
    }
  }
}

// Menu Buttons have a special state that shows up when their menus are visible.
.btn-menu,
.btn-actions {
  &.is-open:not(.btn-filter) {
    background-color: $button-color-tertiary-hover-background-new !important;
    color: $button-color-tertiary-menu-open-new !important;

    .icon {
      color: $button-color-tertiary-menu-open-new !important;
    }
  }
}

.btn-tertiary,
.btn-icon,
.btn-menu,
.btn {
  border-radius: 8px;

  &.btn-icon {
    padding: 0;
  }

  &:hover:not([disabled]):not(.btn-primary):not(.btn-secondary):not(.trigger):not(.application-menu-trigger) {
    &:not(:disabled) {
      background-color: $button-color-tertiary-hover-background-new;
      color: $button-color-tertiary-hover-text-new;
    }

    &.close,
    &.btn-filter,
    &.personalize-actionable {
      background-color: unset !important;
      color: unset;
    }

    svg.icon {
      color: $button-color-tertiary-hover-text-new;
    }
  }

  &.destructive {
    color: $button-color-tertiary-destructive-initial-background-new;

    svg.icon {
      color: $button-color-tertiary-destructive-initial-background-new;
    }

    &:focus:not(.hide-focus) {
      border-color: $button-color-destructive-focus-border-new;
    }

    &:hover:not(:disabled) {
      color: $button-color-tertiary-destructive-hover-font-new;
      background-color: $button-color-tertiary-destructive-hover-background-new;

      svg.icon {
        color: $button-color-tertiary-destructive-hover-font-new;
      }
    }

    &:disabled {
      color: $button-color-tertiary-destructive-initial-background-new;
      opacity: 0.4;

      svg.icon {
        color: $button-color-tertiary-destructive-initial-background-new;
      }
    }
  }
}

.btn-editor {
  border-radius: 8px;

  &:hover:not(:disabled):not(.close):not(.btn-filter):not(.personalize-actionable):not(.destructive) {
    background-color: $button-editor-color-hover-background-new !important;
    color: $button-editor-color-tertiary-hover-font-new !important;

    svg.icon {
      color: $button-editor-color-tertiary-hover-font-new !important;
    }

    &.is-active svg.icon {
      color: $editor-btn-active-color !important;
    }
  }
}

.btn-icon.trigger:hover:not(:disabled) {
  background-color: $button-color-tertiary-hover-background-new;
}

.btn-link {
  color: $button-color-tertiary-initial-font;
  border-radius: 8px;

  svg.icon,
  .icon {
    color: $button-color-tertiary-initial-font;
  }

  &:not([disabled]):not(:disabled):hover {
    background-color: $button-color-tertiary-hover-background-new;
    color: $button-color-tertiary-initial-font;

    svg.icon {
      color: $button-color-tertiary-initial-font;
    }
  }
}

// Reset standard button alignments.
[class^='btn'],
.btn-primary,
.btn-secondary,
.btn-tertiary {
  height: auto;
  line-height: normal;
  min-height: 34px;

  > * {
    vertical-align: baseline;
  }

  > .icon {
    margin-top: -3px;
    vertical-align: middle;
  }
}

// Icon/Actions button icons should be better-centered against the focus state.
.btn-actions,
.btn-icon,
.btn-close {
  > .icon {
    display: inline-flex;
    vertical-align: middle;
    flex-direction: row;
  }
}

// Fix cross pixel effect
.btn-actions {
  > .icon {
    height: 19px;
    top: -1px;
  }
}

// Resize the "x" in the close button back to Soho-style sizes
.btn-close {
  > .icon {
    width: 18px;
  }
}

// IE11's `middle`, `sub`, and `text-bottom` alignments don't jive
// well with our iconography.
.ie11 {
  [class^='btn'],
  .btn-primary,
  .btn-secondary,
  .btn-tertiary {
    > .icon {
      vertical-align: -20%;
    }
  }
}

// Safari's and Firefox's `middle` alignment doesn't jive
// well with our iconography
.is-safari,
.is-firefox {
  [class^='btn'],
  .btn-primary,
  .btn-secondary,
  .btn-tertiary {
    > .icon {
      margin-top: -2px;
    }
  }
}

.field-short [class^='btn']:not(.btn-editor):not(.btn-icon),
.form-layout-compact .field [class^='btn']:not(.btn-editor):not(.btn-reveal):not(.btn-icon):not(.btn-dismissible) {
  min-height: $button-size-compact-height;

  > .icon + span:not(.audible):not(:empty) {
    padding: 0;
  }

  > .icon {
    top: 0;
    vertical-align: sub;

    &:not(.icon-dropdown) {
      height: 16px;
      position: relative;
      vertical-align: sub;

      + span:not(.audible) {
        position: relative;
      }
    }
  }
}

.form-layout-compact .field {
  .tag {
    .btn-dismissible {
      align-items: center;
      display: flex;
      height: inherit !important;
      line-height: inherit;
      margin-bottom: 0;
      min-height: inherit !important;
      top: 0;

      > .icon {
        &:not(.icon-dropdown) {
          top: 0;
        }
      }
    }
  }
}

.btn-icon .icon.app-header {
  top: 2px;
}

.btn-icon.application-menu-trigger {
  svg.icon {
    + .notification-badge-container {
      .notification-dot.notification-dot-upper-left {
        left: -19px;
      }

      .notification-dot.notification-dot-upper-right {
        right: 8px;
      }

      .notification-dot.notification-dot-lower-left {
        left: -19px;
        top: 10px;
      }

      .notification-dot.notification-dot-lower-right {
        left: -11px;
        top: 10px;
      }
    }
  }
}

.field-short,
.form-layout-compact .field {
  [class^='btn']:not(.btn-editor):not(.btn-reveal):not(.btn-icon) {
    &[class*='searchfield'] {
      height: $searchfield-button-size-compact-height-new;
      min-height: $searchfield-button-size-compact-height-new;
    }
  }

  .searchfield-wrapper {
    .btn-icon.close {
      top: 4px;
    }
  }
}

html {
  .field {
    .searchfield-wrapper.has-close-icon-button.has-text {
      .btn-icon.close {
        border-radius: 11px;

        svg.close {
          position: relative;
          top: 0.5px;
        }
      }
    }
  }

  .field-short,
  .form-layout-compact .field {
    .searchfield-wrapper.has-close-icon-button.has-text {
      .btn-icon.close {
        top: 2px;

        svg.close {
          position: relative;
          top: 2px;
        }
      }
    }
  }
}

html[dir='rtl'] {
  &.is-chrome,
  &.is-safari {
    .field-short,
    .form-layout-compact .field {
      .searchfield-wrapper.has-close-icon-button.has-text {
        .btn-icon.close {
          top: 4px;
        }
      }
    }
  }

  &.is-firefox {
    .field-short,
    .form-layout-compact .field {
      .searchfield-wrapper.has-close-icon-button.has-text {
        .btn-icon.close {
          top: 6px;
        }
      }

      [class^='btn'],
      .btn-primary,
      .btn-secondary,
      .btn-teritary {
        span {
          + .icon {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}