@import 'main';

$button_min_width: 123px;
$button_height_medium: 32px;
$button_height_large: 40px;
$button_icon_size: 24px;

.button {
  @include border-radius();
  border: none;
  font-family: $default_font_family;
  font-size: $default_font_size;
  font-weight: bold;
  text-align: center;
  min-width: $button_min_width;
  height: $button_height_medium;
  padding: 0 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  @include transition();
}

.box-icon {
  display: inline-block;
  vertical-align: middle;
  @include middle();

  &.left-icon {
    margin-right: 8px;
  }

  &.waiting-icon {
    display: none;
  }

  .icon {
    font-size: $button_icon_size;
  }
}

.button-only-with-icon {
  width: 32px;
  padding: 0;
  min-width: auto;

  .left-icon {
    margin-right: 0;
  }
}

.waiting {
  font-size: 0;
  text-align: center !important;
  padding: 0 4px !important;

  .box-icon {
    display: none;
  }

  .waiting-icon {
    display: inline-block !important;

    svg {
      width: 32px;
      height: 32px;
    }
  }

  &.button-only-with-icon .waiting-icon svg {
    width: $button_icon_size;
    height: $button_icon_size;
  }
}

.btn-primary {
  color: $color_paper;
  @include linear-gradient(top, $color-primary, $color_primary_deep_dark);
  @include box-shadow($box_shadow_primary);

  .action-icon i {
    color: $color_paper;
  }

  .waiting-icon svg {
    fill: $color_paper;
  }

  &:hover {
    cursor: pointer;
    background-color: $color_primary;
    @include box-shadow($box_shadow_primary_hover);
  }

  &.active, &:active {
    @include box-shadow(none);
  }

  &:active:not(.active) {
    background: $color_primary_deep_dark;
  }

  &.active {
    background: $color-primary;
  }
}

.btn-secondary {
  color: $color_dark;
  @include linear-gradient(top, $color_paper, $color_light_bright);
  border: 1px solid $color_table_border;

  .waiting-icon svg {
    fill: $color_dark;
  }

  &:hover {
    cursor: pointer;
    border-color: $color_primary;
    @include box-shadow($box_shadow_light);
  }

  &:active, &.active {
    @include box-shadow(none);
  }

  &:active:not(.active) {
    color: $color_paper;
    background: $color_primary_deep_dark;

    .action-icon i {
      color: $color_paper;
    }

    .waiting-icon svg {
      fill: $color_paper;
    }
  }

  &.active {
    background: $color_paper;

    &.action {
      border-color: transparent;
      border-bottom-color: $color_light;
    }
  }
}

.action {
  text-align: left;
  padding-right: 36px;

  & &-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    right: 0;
    padding: 0 8px;
    @include middle();

    i {
      font-size: $button_icon_size;
    }
  }

  &.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    @include box-shadow($box_shadow_paper_hover);
  }
}

.button[disabled] {
  color: $color_grey;
  background-color: $color_light;
  background: $color_light;

  .action-icon i {
    color: $color_grey;
  }

  .waiting-icon svg {
    fill: $color_grey;
  }
}

.btn-large {
  height: $button_height_large;
}

.btn-medium {
  height: $button_height_medium;
}