@import 'bourbon/bourbon';
// https://app.frontify.com/d/GthysWU8RY0Q/brand-guidelines#/basics/colors
// Corporate Main Colors
$coveo-orange: #f58020;
$coveo-blue: #0059b3;
$coveo-red: #dc291e;
// New corporate main colors
$color-primary: #1372ec;
$color-primary-variant: #215cd3;
$color-on-primary: #ffffff;
// Complementary Colors Set 1
$color-dark-grey: #313a45;
$color-purple: #609;
$color-grey: #4f5658;
$color-greyish-dark-blue: #263e55;
$color-greyish-teal-blue: #1d4f76;
$color-blueish-gray: #67768b;
$color-vibrant-blue: #009ddc;
$color-blue-background: #486fc7;
// Complementary Colors Set 2
$color-teal: #296896;
$color-greyish-cyan: #cddee9;
$color-greyish-light-cyan: #cddee9;
$color-light-contrast-grey: #7e8c9a;
$color-very-light-grey: #dee1e4;
$color-strong-contrast-grey: #657381;
$color-light-grey: #bcc3ca;
$color-blueish-white-grey: #e6ecf0;
$color-blueish-white: #f7f8f9;
$color-light-greyish-blue: #9cb4cb;
// Coveo Partners Colors
$color-coveo-for-sitecore: #dc291e;
$color-coveo-for-salesforce: #009ddc;
$color-green: #3a833c;
$color-red: #cc0d00;
$color-active-yellow: #ecad00;
$color-transparent-background: rgba(255, 255, 255, 0.85);
$color-white-transparent: rgba(255, 255, 255, 0.5);
$color-light-grey-transparent: rgba($color-light-grey, 0.74);
// Font sizes
$font-size-huge: 24px;
$font-size-biggest: 18px;
$font-size-bigger: 16px;
$font-size-regular: 15px;
$font-size-smaller: 14px;
$font-size-smallest: 12px;
// Border
$default-border-radius: 2px;
$small-border-radius: 1px;
$default-border: thin solid $color-light-grey;
$default-low-contrast-border: thin solid $color-light-contrast-grey;
$default-medium-border: 2px solid $color-very-light-grey;
@mixin defaultRoundedBorder {
  border: $default-border;
  border-radius: $default-border-radius;
}
@mixin defaultRoundedLowContrastBorder {
  border: $default-low-contrast-border;
  border-radius: $default-border-radius;
}
@mixin defaultMediumRoundedBorder {
  border: $default-medium-border;
  border-radius: 4px;
}
@mixin highContrastModeOutline {
  &:not(:focus) {
    outline: 1px solid transparent;
  }
}

$standard-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
/*
* @param direction vertical or horizontal
* @param position type of positioning to apply (relative/absolute)
*/

@mixin align($direction: 'vertical', $position: relative) {
  position: $position;
  @if $direction== 'vertical' {
    top: 50%;
    @include transform(translateY(-50%));
  } @else {
    left: 50%;
    @include transform(translateX(-50%));
  }
}

@mixin hoverEffectForDropdown($target: '&') {
  @include clickable();
  cursor: pointer;
  #{$target} {
    background: white;
  }
  #{$target}:hover {
    background: $color-blueish-white-grey;
  }
}

@mixin iconWithHoverState($iconClass, $float: 'left', $inactive: 'coveo-disabled') {
  .#{$iconClass} {
    float: #{$float};
  }
  &:hover {
    .coveo-active-shape-svg {
      fill: $color-active-yellow;
    }
  }
  &:hover.#{$inactive} {
    .coveo-active-shape-svg {
      fill: currentColor;
    }
  }
}

@mixin clickable($dark-background: false) {
  color: $coveo-blue;
  text-decoration: none;
  cursor: pointer;
  @if $dark-background==true {
    color: $color-blueish-white;
    text-decoration: underline;
  }
  &:visited,
  &:visited:hover {
    color: $color-purple;
    @if $dark-background==true {
      color: $color-blueish-white;
    }
  }
  &:hover,
  &:hover a,
  &:focus,
  &:focus a {
    text-decoration: underline;
  }
  &.coveo-selected * {
    color: $coveo-blue;
    @if $dark-background==true {
      color: $color-blueish-white;
    }
  }
}

/*
* @param $selector css selector on which to apply the icon. Can be '&' if the icon should be applied on the current element;
* @param $size size of the icon to use
*/

@mixin clearButton($selector, $size: 'normal') {
  cursor: pointer;
  color: $color-greyish-teal-blue;
  .coveo-exclusion-svg {
    fill: $color-greyish-teal-blue;
  }
  #{$selector} svg {
    @if $size== 'normal' {
      width: 12px;
      height: 12px;
    } @else if $size== 'small' {
      width: 8px;
      height: 8px;
    } @else if $size== 'big' {
      width: 15px;
      height: 15px;
    }
  }
  &:hover {
    #{$selector} {
      color: $color-red;
      .coveo-exclusion-svg {
        fill: $color-red;
      }
    }
  }
}

@mixin coveo-email-to-and-from {
  font-size: 13px;
  a {
    @include clickable();
    white-space: nowrap;
  }
}

@mixin linkButton {
  @include clickable();

  // These two lines are for IE11
  overflow: visible;
  width: auto;

  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: $color-teal;
}

$allFacetsType: '\
.CoveoFacet,\
.CoveoFacetRange,\
.CoveoFacetSlider,\
.CoveoHierarchicalFacet,\
.CoveoCategoryFacet,\
.CoveoTimespanFacet,\
';

$allDynamicFacetsType: '\
.CoveoDynamicFacet,\
.CoveoDynamicFacetRange,\
.CoveoDynamicHierarchicalFacet,\
';
