@import '../core';

$control-border-color: $ec-border-color;
$control-border-width: rem-calc($ec-border-width);
$control-border-radius: $ec-border-radius;
$control-color: $ec-color-text-primary-dark;
$control-bg: $ec-color-bg-content;
$control-font-family: $ec-font-family;
$control-font-size: $ec-font-size-body;
$control-height: rem-calc(32px);
$control-line-height: rem-calc(20px);
$control-padding-x: rem-calc(8px);

// Active State
$control-bg-active: $ec-color-link;
$control-text-active: $ec-color-text-primary-light;

// Focused
$control-bg-focused: $ec-color-text-disabled-dark;
$control-border-color-focused: $ec-color-link;
$control-shadow-focused: 0 0 0 $ec-border-width $control-border-color-focused;

// Disabled
$control-bg-disabled: $ec-color-text-disabled-dark;
$control-color-disabled: $ec-color-text-secondary-dark;
$control-opacity-disabled: .65;

// Invalid
$control-bg-invalid: $ec-color-bg-caution;
$control-border-color-invalid: $ec-color-caution;

// Read only
$control-bg-read-only: rgba($black, .12);

/// Calculates the height, line-height and padding of a control
/// @param {number} $font-size [$control-font-size] - The font size of the control
/// @param {number | string} $height [$control-height] - The height of the control
/// @param {number} $line-height [$control-line-height] - The line-height of the control
/// @param {boolean} $borders [true] - Does the contorl have borders
@mixin control-dimensions(
  $font-size: $control-font-size,
  $height: $control-height,
  $line-height: $control-line-height,
  $borders: true
) {

  // If $height is auto, set height to auto and reassign $control-height to $height for padding calculations
  @if $height == auto {
    height: $height;
    $height: $control-height;
  } @else {
    height: $height;
  }

  // Remove units from $line height so it is relative to the control's font-size
  line-height: strip-unit($line-height);

  // Vertical padding should be the height minus the lineheight divided by two. If the control has borders, remove the border's width from the vertical padding
  @if unit($line-height) != 'rem' {
    @error "$line-height must be in rems in order to do calculations, was #{unit($line-height)}."
  }

  $padding-y: ($height - $line-height) / 2;
  @if $borders {
    $padding-y: (($height - $line-height) / 2) - $control-border-width;
  }
  padding: rem-to-em($padding-y, $font-size) rem-to-em($control-padding-x, $font-size);
}

@mixin control-focus($borders: true) {
  @if $borders {
    border-color: $control-border-color-focused;
    box-shadow: $control-shadow-focused;
  } @else {
    background-color: $control-bg-focused;
  }
}

@mixin control-disabled($type, $borders: true) {
  @if $borders {
    background-color: $control-bg-disabled;
    border-color: $control-border-color;
  }

  color: $control-color-disabled;
  opacity: $control-opacity-disabled;

  @if $type == form {
    &:required,
    &:required.is-empty {
      background-image: none;
      padding-left: rem-to-em($control-padding-x, $control-font-size);

      // We need to define these again because the :required styles override
      // the background-color and border-color we set above
      @if $borders {
        background-color: $control-bg-disabled;
        border-color: $control-border-color;
      }
    }
  }
}

@mixin control-invalid($borders: true) {
  @if $borders {
    &:not(:focus) {
      border-color: $control-border-color-invalid;
    }
  }
  background-color: $control-bg-invalid;
}

@mixin control-default($borders: true) {
  @if $borders {
    border-color: $control-border-color;
  }
  background-color: $control-bg;
}

@mixin control-active {
  background-color: $control-bg-active;
  color: $control-text-active;
}
