@import "../variables/dimensions";
@import "../variables/colors";

$btn-line-height: $line-height-base + 0.04;

.btn {
    display: inline-block;
    font-size: $font-size-base;
    line-height: $btn-line-height; // 13px rounding error correction
    > .rc-icon {
      display: inline-block;
      margin-right: $btn-icon-margin-right;
      margin-top: $btn-icon-margin-vertical;
      margin-bottom: $btn-icon-margin-vertical;
      vertical-align: baseline;
    }
}

// override bootstrap
.btn-toolbar {
    display: inline-block;
    margin-left: -$grid-gutter-width; // Offset the first child's margin
    vertical-align: top;
    > .btn,
    > .btn-group,
    > .input-group {
        margin-left: $grid-gutter-width;
    }
    &.no-offset {
        margin-left: 0;
    }

    // CTA link buttons
    &.cta-toolbar {
        .btn-link {
            color: $ctaLinkColor;
            &:hover,
            &:focus {
                color: $ctaLinkColorHover;
                text-decoration: underline;
            }
            &:not([disabled]) {
                &:hover,
                &:focus {
                    span {
                        &:not([class^="rc-icon"]) {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
        .dropdown {
            .dropdown-toggle {
                .rc-icon {
                    margin-right: 0;
                }
                // Hack for normalize button height
                &:after {
                    display: inline-block;
                    content: '\00a0';
                    width: 10px;
                    margin-right: -10px;
                }
            }
            .dropdown-menu {
                .rc-icon {
                    margin-right: $btn-icon-margin-right;
                }
            }
        }
    }
}

.btn-link.disabled,
.btn-link.rc-button-icon-only,
.btn-link.rc-button-with-icon:not(div.cta-toolbar) {
    text-decoration: none !important;

    &:hover,
    &:focus {
        text-decoration: none !important;
    }
}

.btn-link {
    color: $primaryColor;
    &:focus,
    &.focus {
        outline: none;
    }
    &:active,
    &.active {
        outline: none;
        &:hover,
        &:focus,
        &.focus {
            outline: none;
        }
    }
    &:hover {
        color: $link-hover-color;
    }
    &[disabled] {
        &,
        &:hover,
        &:focus {
            color: $ctaLinkDisabledColorHoverContrast !important;
        }
    }
}

.rc-button-icon-only .rc-icon {
    margin-right: 0;
    margin-left: 0;
}


.rc-button-with-inline {
    vertical-align: baseline;
    padding-top: 0;
    padding-bottom: 0;
}

// Overrides of Bootstrap mixin

@mixin rc-button-variant($color, $background, $border,
    $hoverColor, $hoverBackground, $hoverBorder,
    $disabledColor, $disabledBackground, $disabledBorder) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:focus,
  &.focus {
    color: $hoverColor;
    background-color: $hoverBackground;
    border-color: $hoverBorder;
    outline: none;
  }
  &:hover {
    color: $hoverColor;
    background-color: $hoverBackground;
    border-color: $hoverBorder;
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $hoverColor;
    background-color: $hoverBackground;
    border-color: $hoverBorder;
    box-shadow: none;
    &:hover,
    &:focus,
    &.focus {
      color: $hoverColor;
      background-color: $hoverBackground;
      border-color: $hoverBorder;
      outline: none;
    }
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
      background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus {
      opacity: 1;
      background: $disabledBackground;
      border-color: $disabledBorder;
      color: $disabledColor;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}

.btn-default {
  @include rc-button-variant($btn-default-color, $btn-default-bg, $btn-default-border,
          $btn-default-color-hover, $btn-default-bg-hover, $btn-default-border-hover,
          $btn-default-color-disabled, $btn-default-bg-disabled, $btn-default-border-disabled);
}
.btn-primary {
  @include rc-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border,
          $btn-primary-color-hover, $btn-primary-bg-hover, $btn-primary-border-hover,
          $btn-primary-color-disabled, $btn-primary-bg-disabled, $btn-primary-border-disabled);
}
.btn-success {
  @include rc-button-variant($btn-success-color, $btn-success-bg, $btn-success-border,
          $btn-success-color-hover, $btn-success-bg-hover, $btn-success-border-hover,
          $btn-success-color-disabled, $btn-success-bg-disabled, $btn-success-border-disabled);
}
.btn-warning {
  @include rc-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border,
          $btn-warning-color-hover, $btn-warning-bg-hover, $btn-warning-border-hover,
          $btn-warning-color-disabled, $btn-warning-bg-disabled, $btn-warning-border-disabled);
}
.btn-danger {
  @include rc-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border,
          $btn-danger-color-hover, $btn-danger-bg-hover, $btn-danger-border-hover,
          $btn-danger-color-disabled, $btn-danger-bg-disabled, $btn-danger-border-disabled);
}

.more-button {
  .more-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .more-label--disabled {
    color: $more-button-disabled-text-color;
  }
}