// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

$button-vertical-padding:
  round($inuit-base-spacing-unit / 3) - $button-border-width;
$button-horizontal-padding:
  round($inuit-base-spacing-unit) - $button-border-width;

@mixin basic-button {
  padding: $button-vertical-padding $button-horizontal-padding;
  background-color: transparent;
  border: $button-border-width solid $button-border-color;
  border-radius: $border-radius;
  color: $button-text-color;
  @include inuit-font-size($control-font-size, $inuit-base-spacing-unit);
  font-weight: $control-font-weight;
  cursor: pointer;
  text-align: center;
  outline: none;
  min-width: $button-min-width;
  max-width: $button-max-width;

  @include media-query(lap-and-up) {
    transition: 0.1s ease-in-out;
  }

  #{$dark-background-context} {
    border-color: $button-colored-border-color;
  }

  #{$light-background-context} {
    border-color: $button-border-color;
  }
}

.grommet {
  input[type="button"],
  input[type="submit"],
  button:not(.#{$grommet-namespace}button) {
    @include basic-button();

    &:focus {
      border-color: $focus-border-color;
      box-shadow: 0 0 1px 1px $focus-border-color;
    }
  }

  a.#{$grommet-namespace}button {
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }
}

.#{$grommet-namespace}button {
  @include basic-button();

  &--focus {
    border-color: $focus-border-color;
    box-shadow: 0 0 1px 1px $focus-border-color;
  }

  @include background-context-color($button-text-color, $button-text-color);
}

.#{$grommet-namespace}button:hover {
  .#{$grommet-namespace}control-icon {
    @include icon-color($active-icon-color);
    transition: none;
  }

  #{$dark-background-context} {
    .#{$grommet-namespace}control-icon {
      @include icon-color($active-colored-icon-color);
    }
  }

  #{$light-background-context} {
    .#{$grommet-namespace}control-icon {
      @include icon-color($active-icon-color);
    }
  }
}

.#{$grommet-namespace}button__icon {
  display: inline-block;

  .#{$grommet-namespace}control-icon {
    vertical-align: bottom;
  }
}

.#{$grommet-namespace}button--primary {
  &:not(.#{$grommet-namespace}button--focus) {
    border-color: $brand-color;
  }
  background-color: $brand-color;
  color: $active-colored-text-color;

  &:hover:not(.#{$grommet-namespace}button--disabled) {
    color: $active-colored-text-color;

   .#{$grommet-namespace}button__icon .#{$grommet-namespace}control-icon {
      @include icon-color($active-colored-icon-color)
    }
  }

  .#{$grommet-namespace}control-icon {
    @include icon-color($active-colored-icon-color);
  }

  @include background-context-color($active-colored-text-color,
    $active-colored-text-color);
}

.#{$grommet-namespace}button--secondary:not(.#{$grommet-namespace}button--focus) {
  border-color: $button-secondary-color;
}

.#{$grommet-namespace}button--accent:not(.#{$grommet-namespace}button--focus) {
  border-color: $button-accent-color;
}

.#{$grommet-namespace}button--align-start {
  text-align: left;

  html.rtl & {
    text-align: right;
  }
}

.#{$grommet-namespace}button--plain {
  border: none;
  padding: 0;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  text-align: inherit;
  font-weight: inherit;

  .#{$grommet-namespace}button__label {
    margin: 0 halve($inuit-base-spacing-unit);
  }

  .#{$grommet-namespace}button__icon {
    padding: halve($inuit-base-spacing-unit);

    + .#{$grommet-namespace}button__label {
      margin-left: 0;
    }
  }
}

.#{$grommet-namespace}button:not(.#{$grommet-namespace}button--plain) {
  .#{$grommet-namespace}button__icon {

    @include background-context-icon($button-text-color, $button-text-color);

    + .#{$grommet-namespace}button__label {
      margin-left: halve($inuit-base-spacing-unit);
    }
  }
}

.#{$grommet-namespace}button--disabled {
  opacity: 0.3;
  cursor: default;
}

.#{$grommet-namespace}button:not(.#{$grommet-namespace}button--fill) {
  flex: 0 0 auto;
}

.#{$grommet-namespace}button--fill {
  width: 100%;
  max-width: none;
  // used to add full height for button inside a flex container
  flex-grow: 1;
}