3scale/porta

@mixin internal-potato-button($color, $bgcolor, $border-color) {
  font-size: $font-size-base;
  background-color: $bgcolor;
  border-radius: $border-radius-sm;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: line-height-times(1/3) line-height-times(1/2) !important;
  border: $border-width solid $border-color;
  color: $color;
  text-decoration: none;
  width: auto !important;
  min-width: line-height-times(3);
  cursor: pointer;
  white-space: nowrap;
  text-align: center !important;
  height: line-height-times(1.5);
  line-height: $line-height-sm;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  &.big {
    font-size: $font-size-lg;
  }

  &:hover {
    color: $bgcolor;
    background-color: transparent;
  }

}

table .less-important-button,
form.formtastic .button-group button.less-important-button,
.less-important-button {
  @include internal-potato-button($secondary-button-color, $secondary-button-bg-color, $secondary-button-border-color);
}

table [type='submit']:not(.action):not(.pf-c-button) {
  float: right;
  @include internal-potato-button($important-button-color, $important-button-bg-color, $important-button-border-color);
}

table .important-button, .important-button, .formtastic .important-button {
  @include internal-potato-button($important-button-color, $important-button-bg-color, $important-button-border-color);
}

table .disabled-button, .disabled-button {
  @include internal-potato-button($disabled-button-color, $disabled-button-bg-color, $disabled-button-border-color);
  cursor: default;
}

.button.next,
a.next {
  float: right;
}

.confirm-or-cancel {

  .button.next, a.next {
    clear: none;
  }

  .button.cancel, a.cancel {
    float: left;
    margin-top: line-height-times(2);
  }

}


.dangerous-button, .formtastic .dangerous-button {
  @include internal-potato-button(white, $delete-color, $delete-color );
}


.formtastic .actions {
  button, input[type='submit'] {
     height: line-height-times(1.5);
  }
}

form.formtastic .button-bar fieldset {
  margin: 0;
}

// Lame but functional, improvements welcomed.
form.formtastic .button-bar, .button-bar {
  position: relative;

  & > fieldset {

    &.actions:first-child {
      position: absolute;
      left: 0;
      margin: line-height-times(1/2) 0 0 0;
      padding: 0 0 0 0;
      text-align: left !important;

      & > ol > li {
        margin-right: line-height-times(1/3);
      }
    }

    &.actions:last-child {
      position: absolute;
      width: 65%;
      right: 0;
      margin: line-height-times(1/2) 0 0 0;
      padding: 0 0 0 0;

      & > ol > li {
        margin-left: line-height-times(1/3);
      }

    }

    & > ol > li { display: inline-block; }
  }
}

.formtastic.cms_template .button-bar {
  height: line-height-times(1.5);
}

@mixin outline-button($color: $font-color, $border-color: $border-color) {
  color: $color;
  display: inline-block;
  font-size: $font-size-base;
  line-height: 1;
  border: $border-width solid $border-color;
  border-radius: $border-radius-sm;
  margin-top: -$border-width;
  padding: line-height-times(1/3) line-height-times(1/2);
  height: line-height-times(3/2);
  background-color: transparent;
  cursor: pointer;


  &:hover {
    color: $link-color;
    border-color: $link-color;
  }
}

.outline-button {
  @include outline-button;
}

.outline-button-thin {
  @include outline-button;
  padding: line-height-times(1/4) line-height-times(1/3) !important;
  height: line-height-times(5/4);
}

.outline-button-thin--negative {
  @include outline-button($error-color, $error-color);
  padding: line-height-times(1/4) line-height-times(1/3) !important;
  height: line-height-times(5/4);
}

.outline-button-thin--positive {
  @include outline-button($success-color, $success-color);
  padding: line-height-times(1/4) line-height-times(1/3) !important;
  height: line-height-times(5/4);
}