@mixin icon-button($type: nil) {
  @include simple-button($type);

  padding-left: 12px;

  &:before {
    font-size: 16px;
    margin-right: 6px;
    vertical-align: top;
  }
}

@mixin icon-only-button($type: nil) {
  @include simple-button($type);

  padding-left: 8px;
  padding-right: 8px;

  &:before {
    font-size: 16px;
    vertical-align: top;
  }
}

@mixin simple-button($type: nil) {
  border-radius: rounded();
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 18px;
  text-decoration: none;
  line-height: 16px;

  @if $type == "primary" {
    background-color: var(--ui-primary-color);
    border: solid 1px var(--ui-primary-color);
    color: var(--ui-on-primary-color);

    &:hover:not(:disabled):not(.disabled) {
      opacity: 0.92;
    }

    &:disabled,
    &.disabled {
      background-color: var(--ui-on-surface-color-lightest-solid);
      border-color: var(--ui-on-surface-color-lightest-solid);
      color: var(--ui-primary-color-light);
      cursor: default;
    }
  } @else {
    background-color: transparent;
    border: solid 1px var(--ui-button-border-color);
    color: var(--ui-on-button-color);

    @if $type == "destructive" {
      &:hover:not(:disabled):not(.disabled) {
        background-color: var(--ui-error-color);
        border-color: var(--ui-error-color);
        color: var(--ui-on-error-color);
      }
    } @else {
      &.hover:not(:disabled):not(.disabled),
      &:hover:not(:disabled):not(.disabled) {
        border-color: var(--ui-button-hover-border-color);
      }
    }

    &:disabled,
    &.disabled {
      opacity: 0.5;
      cursor: default;
    }
  }

  &:hover:not(:disabled):not(.disabled) {
    cursor: pointer;
  }

  &:active:not(:disabled):not(.disabled),
  &:focus:not(:disabled):not(.disabled) {
    box-shadow: 0 0 0 2px var(--ui-button-focus-ring-color);
  }
}
