src/components/Button/Button.scss
@import '../../constants/styles';

.Button {
  @include button-reset;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  color: var(--text-color);
  // Prevents inset box-shadows from leaving artifacts by forcing GPU acceleration
  transform: translate3d(0, 0, 0);

  img {
    height: 24px;
    width: 24px;
  }

  // color for svgs
  &.active {
    path[fill='default'] {
      fill: var(--selected-icon-color);
    }

    // hack for pan tool and annot select tool
    &[data-element='panToolButton'],
    &[data-element='selectToolButton'] {
      background: var(--view-header-button-active);
    }
  }

  &.active {
    .Icon {
      color: var(--selected-icon-color);
    }
  }

  &.disabled,
  &:disabled {
    background: none;
    cursor: default;

    .Icon {
      color: var(--disabled-icon);
    }

    span {
      color: var(--disabled-icon);
    }
  }

  &.modular-ui {
    &.button-text-icon,
    &.icon-only:not(.dropdown-icon-only) {
      &:hover:not(:disabled):not(.disabled) {
        @extend %icon-button-hover;
      }

      &:hover:not(:disabled):not(.disabled):not(.active) {
        @include mobile {
          box-shadow: none;
          background-color: transparent;
        }
      }

      &.active {
        box-shadow: inset 0 0 0 1px var(--blue-5);
        background: var(--tools-button-active);

        .Icon {
          color: var(--blue-5);
        }
      }

      &[disabled],
      &.disabled {
        cursor: not-allowed;
        &:hover {
          box-shadow: none;
        }
      }
    }

    &.button-text-icon {
      width: auto;
      gap: var(--padding-small);
      padding: 0 var(--padding-small);
      text-wrap: nowrap;
    }

    &.dropdown-icon-only.active {
      .Icon,
      & + .Icon {
        color: var(--blue-5);
      }
    }
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: var(--focus-visible-outline) !important;
    z-index: 2;
  }
}

// For office editor headers: dropdowns styled to resemble buttons
.dropdown-text-icon {
  &.open,
  &:hover:not([disabled]):not(.disabled) {
    .display-button {
      @extend %icon-button-hover;
      border-radius: 4px;
    }
  }

  &[disabled],
  &.disabled {
    .display-button,
    .Button {
      cursor: not-allowed;
    }
  }

  .display-button {
    display: flex;
    align-items: center;
    gap: var(--padding-small);
    padding: 0 var(--padding-small);
    cursor: pointer;

    .Button {
      width: auto;
      gap: var(--padding-small);
    }

    .Icon.arrow {
      width: 12px;
      height: 12px;
    }
  }
}
