libs/barista-components/button/src/button.scss
@import '../../style/font-mixins';
@import '../../core/src/style/variables';
@import '../../core/src/style/interactive-common';

.dt-button {
  @include dt-main-font(30px);
  box-sizing: border-box;
  position: relative;

  // Reset browser <button> styles.
  @include dt-interactive-reset();

  // Make anchors render like buttons.
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;

  height: 32px;
  border-style: solid;
  border-radius: 3px;
  border-width: 1px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
  line-height: -moz-block-height;
  background: transparent;

  &:hover {
    text-decoration: none;
  }

  &[disabled] {
    cursor: default;
    box-shadow: none;
    outline: none;
  }

  // Apply focus to CDK focus monitored elements
  @include dt-cdkmonitor-focus-style();

  &::-moz-focus-inner {
    border: 0;
  }

  // Hack that fixes the annoying issue in IE where an
  // inner padding is applied when button receives active state.
  // This issue can only be fixed in IE11+
  // stylelint-disable-next-line max-line-length
  // See: https://stackoverflow.com/questions/6744406/internet-explorer-buttonactive-inner-padding
  > span {
    position: relative;
  }

  &.dt-icon-button {
    padding-left: 0;
    padding-right: 0;
    width: 32px;
    text-align: center;
  }

  &.dt-button-nested {
    border: 0;
  }

  &.dt-button-nested:hover:not([disabled]),
  &.dt-button-nested:active:not([disabled]) {
    background: $gray-200;
  }

  sub,
  sup {
    // Zero out the line-height so that it doesn't
    // interfere with the positioning that follows
    line-height: 0;
  }
}

.dt-button-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  margin-top: 5px;
  vertical-align: top;

  .dt-button.dt-icon-button & {
    margin-right: 0;
  }
}

a.dt-button[disabled] {
  pointer-events: none;
}

// Text-buttons in table or filter-field cells need to be smaller
.dt-cell .dt-button:not(.dt-icon-button) {
  height: 22px;
  line-height: 22px;

  .dt-button-icon {
    width: 16px;
    height: 16px;
    margin-top: 3px;
  }
}

@import './button-theme';
