@import "../settings.colors";

@import "tools.functions";
@import "tools.mixins";

@mixin control-disabled {
  // Disabling pointer events suppresses the hover state but doesn't allow us
  // to change the cursor See: https://github.com/twbs/bootstrap/issues/16088
  // pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}

// --------------------------------------------------
// Form field labels
// --------------------------------------------------

@mixin control-label {
  @include font-gm-sans-bold;
  padding: 0 0 rem(10) 0;
  color: $color-grey-660;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: 1;
  text-transform: uppercase;
  display: block;
}

// Labels that appear beside checkboxes and radio buttons

@mixin control-label--inline {
  @include font-gm-sans;
  padding-bottom: 0;
  font-size: rem(16);
  letter-spacing: rem(0.3);
  text-transform: none;
}

// --------------------------------------------------
// Text inputs and select boxes
// --------------------------------------------------

// -------------------------
// Base-level styles
// -------------------------

@mixin control-field {
  @include font-gm-sans;
  @include font-rendering-fix;
  width: 100%;
  height: rem(44);
  padding: rem(10);
  border: 1px solid;
  border-radius: 0;
  font-size: rem(16);
  letter-spacing: rem(0.5);
}

// -------------------------
// Colour themes
// -------------------------

// Utility functions that apply colours from a SASS list (see _settings.colors)

@mixin control-field--light-primary($state: null) {
  $theme: light-primary;
  @if $state == "disabled" {
    @include control-disabled;
    border-color: get-control-colors($theme, borders, disabled);
    background-color: get-control-colors($theme, bgs, disabled);
    color: get-control-colors($theme, text, disabled);
  } @else {
    @if $state == "error" {
      border-color: $color-utility-red-700;
    } @else if $state == "success" {
      border-color: $color-utility-green-700;
    } @else {
      border-color: get-control-colors($theme, borders, default);
    }
    background-color: get-control-colors($theme, bgs, default);
    color: get-control-colors($theme, text, default);
  }
}

@mixin control-field--dark-primary($state: null) {
  $theme: dark-primary;
  @if $state == "disabled" {
    @include control-disabled;
    border-color: get-control-colors($theme, borders, disabled);
    background-color: get-control-colors($theme, bgs, disabled);
    color: get-control-colors($theme, text, disabled);
  } @else {
    @if $state == "error" {
      border-color: $color-utility-red-200;
    } @else if $state == "success" {
      border-color: $color-utility-green-200;
    } @else {
      border-color: get-control-colors($theme, borders, default);
    }
    background-color: get-control-colors($theme, bgs, default);
    color: get-control-colors($theme, text, default);
  }
}

// --------------------------------------------------
// Checkboxes and radio buttons
// --------------------------------------------------

// -------------------------
// Base-level styles
// -------------------------

@mixin control-box {
  @include font-gm-sans;
  @include font-rendering-fix;
  height: rem(44);
  padding: rem(10);
  border: 1px solid;
  border-radius: 0;
  font-size: rem(16);
  letter-spacing: rem(0.5);
}

// -------------------------
// Colour themes
// -------------------------

// Utility function that applies colours from a SASS list (see _settings.colors)

@mixin control-box-styling($theme) {
  border-color: get-control-colors($theme, borders, default);
  background-color: get-control-colors($theme, bgs, default);
  color: get-control-colors($theme, text, default);
  &:focus {
    border-color: get-control-colors($theme, borders, hover);
    background-color: get-control-colors($theme, bgs, hover);
    color: get-control-colors($theme, text, hover);
  }
  &:active {
    border-color: get-control-colors($theme, borders, active);
    background-color: get-control-colors($theme, bgs, active);
    color: get-control-colors($theme, text, active);
  }
  &:disabled {
    @include control-disabled;
    border-color: get-control-colors($theme, borders, disabled);
    background-color: get-control-colors($theme, bgs, disabled);
    color: get-control-colors($theme, text, disabled);
  }
}

@mixin control-box--light-primary {
  @include control-box-styling(light-primary);
}

@mixin control-box--dark-primary {
  @include control-box-styling(dark-primary);
}

// --------------------------------------------------
// Buttons
// --------------------------------------------------

// -------------------------
// Base-level styles
// -------------------------

@mixin control-button {
  @include remove-button-appearance;
  @include font-gm-sans-bold;
  @include font-rendering-fix;
  @include control-button--regular;
  @include control-button--regular-icon;
  @include control-button--visible;
  min-width: rem(44);
  padding-top: rem(9);
  padding-bottom: rem(9);
  border: 1px solid;
  border-radius: rem(2);
  line-height: 1;
  letter-spacing: rem(1);
  vertical-align: middle;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  &,
  .c-button__icon {
    transition-property: background-color, color, fill, opacity;
    transition-duration: 0.25s;
    transition-timing-function: ease-out;
  }
  &:active,
  &:active .c-button__icon {
    transition: none;
  }
  .c-button__icon {
    margin-right: rem(5);
  }
  .c-button__icon,
  .c-button__text {
    vertical-align: middle;
    display: inline-block;
  }
  @supports (display: inline-flex) {
    align-items: center;
    justify-content: center;
    .c-button__icon {
      margin-right: rem(9);
    }
  }
}

@mixin control-button--visible {
  display: inline-block;
  @supports (display: inline-flex) {
    display: inline-flex;
  }
}

@mixin control-button--regular {
  min-height: rem(44);
  padding-left: rem(20);
  padding-right: rem(20);
  font-size: rem(14);
}

@mixin control-button--regular-icon {
  .c-button__icon {
    min-width: rem(18);
    width: rem(18);
    height: rem(18);
  }
}

@mixin control-button--small {
  min-height: rem(34);
  padding-left: rem(10);
  padding-right: rem(10);
  font-size: rem(12);
}

@mixin control-button--small-icon {
  .c-button__icon {
    min-width: rem(14);
    width: rem(14);
    height: rem(14);
  }
}

// -------------------------
// Colour themes
// -------------------------

// Utility function that applies colours from a SASS list (see _settings.colors)

@mixin control-button-styling($theme) {
  border-color: get-control-colors($theme, borders, default);
  background-color: get-control-colors($theme, bgs, default);
  color: get-control-colors($theme, text, default);
  .c-button__icon {
    fill: get-control-colors($theme, text, default);
  }
  &:hover,
  &:focus {
    border-color: get-control-colors($theme, borders, hover);
    background-color: get-control-colors($theme, bgs, hover);
    color: get-control-colors($theme, text, hover);
    .c-button__icon {
      fill: get-control-colors($theme, text, hover);
    }
  }
  &:active {
    border-color: get-control-colors($theme, borders, active);
    background-color: get-control-colors($theme, bgs, active);
    color: get-control-colors($theme, text, active);
    .c-button__icon {
      fill: get-control-colors($theme, text, active);
    }
  }
  &:disabled {
    @include control-disabled;
    border-color: get-control-colors($theme, borders, disabled);
    background-color: get-control-colors($theme, bgs, disabled);
    color: get-control-colors($theme, text, disabled);
    .c-button__icon {
      fill: get-control-colors($theme, text, disabled);
    }
  }
}

// Light

@mixin control-button--light-primary {
  @include control-button-styling(light-primary);
}

@mixin control-button--light-secondary {
  @include control-button-styling(light-secondary);
}

@mixin control-button--light-tertiary {
  @include control-button-styling(light-tertiary);
}

// Dark

@mixin control-button--dark-primary {
  @include control-button-styling(dark-primary);
}

@mixin control-button--dark-secondary {
  @include control-button-styling(dark-secondary);
}

// Utility

@mixin control-button--utility-primary--red {
  @include control-button-styling(utility-primary-red);
}

@mixin control-button--utility-secondary--red {
  @include control-button-styling(utility-secondary-red);
}

@mixin control-button--utility-primary--green {
  @include control-button-styling(utility-primary-green);
}

@mixin control-button--utility-secondary--green {
  @include control-button-styling(utility-secondary-green);
}

// On red

@mixin control-button--light-on-red {
  @include control-button-styling(light-on-red);
}

@mixin control-button--dark-on-red {
  @include control-button-styling(dark-on-red);
}

@mixin control-button--transparent-on-red {
  @include control-button-styling(transparent-on-red);
}

// The following colours are used by the accordion only and need
// to be refined, renamed and finessed. Please avoid using them:

@mixin control-button--light-100 {
  @include control-button-styling(light-100);
}

@mixin control-button--light-200 {
  @include control-button-styling(light-200);
}

@mixin control-button--dark-600 {
  @include control-button-styling(dark-600);
}

@mixin control-button--dark-600-v2 {
  @include control-button-styling(dark-600-v2);
}

@mixin control-button--dark-700 {
  @include control-button-styling(dark-700);
}

// -------------------------
// Display options
// -------------------------

@mixin control-button--badge {
  padding: rem(6);
  border-radius: rem(4);
  text-align: left;
  .c-button__icon {
    min-width: rem(32);
    width: rem(32);
    height: rem(32);
  }
  .c-button__text {
    font-size: rem(12);
    line-height: line-height(12, 15);
  }
  .c-button__primary-text {
    display: block;
  }
  .c-button__secondary-text {
    @include font-gm-sans;
  }
}

@mixin control-button--icon-only {
  padding-left: rem(9);
  padding-right: rem(9);
  .c-button__icon {
    margin-right: 0;
  }
}

@mixin control-button--no-border {
  border: none;
}

@mixin control-button--no-border-radius {
  border-radius: 0;
}

@mixin control-button--full-width {
  width: 100%;
}

@mixin control-button--truncated($max-width) {
  .c-button__text {
    width: 100%;
    max-width: $max-width;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
