@import '../variables';
@import 'common';

$control-height: 2.25rem;
$control-font-size: $font-size-body-2;
$control-padding-y: 0;
$control-padding-x: 1rem;

$control-border-width: .125rem;
$control-border-radius: $border-radius;
$control-border-color: $border-color-dark;
$control-border-color-focus: $color-primary;
$control-border-color-error: $color-error;

// Active Control
$control-bg-active: $color-primary-dark;
$control-color-active: $color-text-light;

// Selected Control
$control-bg-selected: $color-primary-light;

// Hovered Control
$control-bg-hover: var(--color-hover-dark);

// Disabled Control
$control-bg-disabled: var(--color-hover-dark);
$control-color-disabled: $color-text-dark-hint;

@mixin control($type: navigation){
  font-size: $control-font-size;

  @if $type == navigation {
    padding: $control-padding-y $control-padding-x;
  } @else {
    padding: $control-padding-y ($control-padding-x / 2);
  }
  height: $control-height;
  border: $control-border-width solid transparent;
  border-radius: $control-border-radius;
  transition: background-color .35s, border-color .25s;
}

@mixin control-active($selector: '&.is-active,&:active') {
  #{$selector} {
    background-color: $control-bg-active;
    color: $control-color-active;
    cursor: default;
    @content;
  }
}

@mixin control-hover($selector: '&:hover') {
  #{$selector} {
    cursor: pointer;
    @content;
  }
}

@mixin control-focus($selector: '&:focus,&:focus.ng-invalid') {
  #{$selector} {
    border-color: $control-border-color-focus;
    outline: none;
    @content;
  }
}

@mixin control-disabled($selector: '&:disabled,&.is-disabled,&:disabled.ng-invalid') {
  #{$selector} {
    background-color: $control-bg-disabled;
    color: $control-color-disabled;
    cursor: default;
    @content;
  }
}

@mixin control-invalid($selector: '&.ng-invalid.ng-dirty') {
  #{$selector} {
    border-color: $control-border-color-error;
  }
}