@import "../settings.colors";

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

// --------------------------------------------------
// 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 function that applies colours from a SASS list (see _settings.colors)

@mixin control-field-styling($theme, $error-state: false) {
  @if $error-state {
    border-color: $color-red-600; // TODO: get the correct colour from UX
  } @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--light-primary($error-state: false) {
  @include control-field-styling(light-primary, $error-state);
}

@mixin control-field--dark-primary($error-state: false) {
  @include control-field-styling(dark-primary, $error-state);
}

// --------------------------------------------------
// 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);
  }
}

@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;
  min-width: rem(44);
  min-height: rem(44);
  padding: rem(9) rem(32);
  border: 1px solid;
  border-radius: rem(2);
  font-size: rem(14);
  line-height: 1;
  letter-spacing: rem(1);
  vertical-align: middle;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.25s ease-out;
  display: inline-block;
  &:active {
    transition-duration: 0s;
    transition-timing-function: unset;
  }
  .c-button__icon {
    min-width: rem(18);
    width: rem(18);
    height: rem(18);
    margin-right: rem(5);
  }
  .c-button__icon,
  .c-button__text {
    vertical-align: middle;
    display: inline-block;
  }
  @supports (display: inline-flex) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    .c-button__icon {
      margin-right: rem(9);
    }
  }
}

// -------------------------
// 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);
    }
  }
}

@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--dark-primary {
  @include control-button-styling(dark-primary);
}

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

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

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

@mixin control-button--utility-primary--inactive {
  cursor: not-allowed;
  @include control-button-styling(utility-primary-inactive);
}

@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);
}

// -------------------------
// 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 {
  width: rem(44);
  height: rem(44);
  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%;
}
