button {
  background: transparent;
  border: 0;
  color: inherit;
  outline: none;
}

.button,
a.button,
button.button {
  @include button();
  @include font-size($small);
  text-align: center;
  text-transform: uppercase;
  &.add {
    @include button($green);
  }
  &.delete {
    @include button($red);
  }
}

.cancel,
.remove {
  color: $grey;
  @include font-size($small);
  padding: $gutter/4 0;
  text-align: center;
  text-transform: uppercase;
  &:hover {
    color: shade($blue, 10%)
  }
}

.remove:hover {
  color: $red;
}

.icon {
  @include tooltip();
  line-height: 1;
  padding: 0;
  @include transition-property(color);
  @include transition-duration(0.2s);
  &:hover {
    color: $blue;
  }
  &:before {
    @include font-size($large);
    @include icon();
  }
  &.console:before { content: 'B'; }
  &.settings:before { content: 'C'; }
  &.view:before { content: 'I'; }
  &.close:before { content: 'X'; }
  &.next:before { content: '>'; }
}

.header,
.actions,
table {
   .controls {
    float: right;
    & > * {
      margin-left: $gutter/4;
      vertical-align: middle;
    }
  }
}