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

// We use mixins for some text styles to make it easier to modularize the
// CSS. For example `.grommet p` uses the same styles as
// `.#{$grommet-namespace}paragraph` while avoiding issues with the
// grommet component not being able to customize styles for various
// flavors without running into prcedence issues with the higher specificity
// of the generic style under `.grommet`.

@mixin input() {
  // Align overall height with regular text line height, reduce
  // top and bottom padding by an extra 2px.
  padding: (halve($inuit-base-spacing-unit) - $input-border-width)
    ($inuit-base-spacing-unit - $input-border-width);
  border: $input-border-width solid $border-color;
  border-radius: $border-radius;
  outline: none;
  background-color: transparent; // inherit; doesn't work on IE
  color: inherit;
  font: inherit;
  margin: 0;

  &:focus {
    border-width: $input-focus-border-width;
    border-color: $focus-border-color;
    padding: (halve($inuit-base-spacing-unit) - ($input-border-width + 1))
      ($inuit-base-spacing-unit - ($input-border-width + 1));
  }

  &::-moz-focus-inner {
    border: none;
    outline: none;
  }

  &::-webkit-input-placeholder {
    color: $placeholder-text-color;
  }

  &::-moz-placeholder {
    color: $placeholder-text-color;
  }

  &:-ms-input-placeholder {
     color: $placeholder-text-color;
  }

  &.error {
    border-color: map-get($brand-status-colors, critical);
  }
}

$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 {
  &:not(.#{$grommet-namespace}button--box) {
    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;
  }
}