$color-red-dark: #e54f47;
$color-black: #000000;
$color-green-readable-border: #B7DFBC;
$color-green-notification: #53C798;
$color-dark-overlay: rgba(0, 0, 0, .8);
$color-yellow-highlight: yellow;
$color-yellow-dark: #d59d00;
$color-green-readable-background: #EBF6ED;
$color-yellow-light: #FFDB7C;
$color-grey-darker: #4A4A4A;
$color-green: #3FAD4D;
$color-white-dark: #F4F4F4;
$color-yellow-readable-border: #FFDB7C;
$color-white: #FFFFFF;
$color-red-darker: #99352f;
$color-blue-light: #6FA1D4;
$color-green-dark: #369342;
$color-white-disabled: rgba(210, 210, 210, .4);
$color-yellow-readable-background: #FFF6DE;
$color-yellow: #EFAE00;
$color-red-readable-border: #FFBCB8;
$color-blue-readable-border: #BCD3E5;
$color-yellow-darker: #896400;
$color-grey-light: #9B9B9B;
$color-dark: #17293D;
$color-red-readable-background: #FFE6E5;
$color-blue-readable-background: #E7EFF6;
$color-red: #FF594F;
$color-white-darker: #EBEBEB;
$color-link: #4A90E2;
$color-blue: #1464A5;
$color-grey-backdrop: rgba(74, 74, 74, .4);
$color-grey-dark: #4F4F4F;
$color-grey: #D8D8D8;
$color-green-darker: #1a4720;
$color-green-light: #7ED321;
$color-blue-dark: #17293D;
$font-family-heading: 'Montserrat', Times New Roman, serif;
$font-family-text: 'Lato', Helvetica, sans-serif;
$font-size-xlarge: 28px;
$font-size-large: 24px;
$font-size-medium: 18px;
$font-size-regular: 14px;
$font-size-small: 12px;
$font-size-xsmall: 10px;
$font-size-xxsmall: 8px;
$font-weight-bold: 700;
$font-weight-semi-bold: 600;
$font-weight-medium: 500;
$font-weight-regular: 400;
$font-weight-light: 300;
$table-value: table_value;
$body: body;
$heading: heading;
$table-title: table_title;
$body-small: body_small;
$heading-small: heading_small;
$display-small: display_small;
$label-optional: label_optional;
$heading-xsmall: heading_xsmall;
$body-xsmall: body_xsmall;
$display-medium: display_medium;
$highlight: highlight;
$label: label;
$label-big: label_big;
$heading-light: heading_light;
$highlight-small: highlight_small;
$display-large: display_large;
$opacity-disabled: 0.5;
$height-footer: 64px;
$tappable-square: 44px;
$size-medium: 18px;
$duration-quickly: 0.08s;
$duration-noticeable: 0.2s;
$duration-slowly: 0.5s;
$easing-base: ease-in-out;
$z-index-modal: 9999;
$z-index-over-modal: 10000;
$z-index-tooltip: 10001;
$z-index-sticky: 100;
$media-query-medium: (min-width: 768px);
$media-query-large: (min-width: 1024px);
$box-shadow-small: 0 2px 5px -3px rgba(0, 0, 0, 0.5);
$box-shadow-small-inset: inset 0 2px 5px 0 rgba(0, 0, 0, 0.3);
$box-shadow-regular: 0 14px 24px -12px rgba(0, 0, 0, 0.2);
$box-shadow-focus: 0 0 0 2px rgba(#1464A5, 0.3);
$box-shadow-focus-success: 0 0 0 2px rgba(#3FAD4D, 0.3);
$box-shadow-focus-error: 0 0 0 2px rgba(#FF594F, 0.3);
$box-shadow-button-hover: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
$letter-spacing-x-large: 2px;
$letter-spacing-large: 1px;
$letter-spacing-base: 0;
$letter-spacing-small: -0.5px;
$letter-spacing-x-small: -1px;
$border-radius-default: 3px;
$border-radius-circle: 50%;
$space-xx-large: 50px;
$space-x-large: 40px;
$space-large: 30px;
$space-base: 20px;
$space-small: 10px;
$space-x-small: 5px;
$line-height-base: 1.5;
$line-height-small: 1.3;
$line-height-heading: 1;

/* VUE DESIGN SYSTEM SPACING HELPERS
--------------------------------------------- */

$spacing-ratio: 1.618;

/*
  INSET-SPACE: For interface containers.
  INSET-SQUISH-SPACE: For buttons, form elements, cells.
  STACK-SPACE: For vertically stacked content.
  INLINE-SPACE: For things displayed inline.
*/

// Create inset-space
//
// @param  {Number} inset-space to set
@mixin inset-space($value) {
  padding: $value;
}

// Create inset-squish-space
//
// @param  {Number} inset-squish-space to set
@mixin inset-squish-space($value) {
  padding: round($value / $spacing-ratio) $value;
}

// Create stack-space
//
// @param  {Number} stack-space to set
@mixin stack-space($value) {
  margin-bottom: $value;
  &:last-child {
    margin-bottom: 0;
  }
}

// Create inline-space
//
// @param  {Number} inline-space to set
@mixin inline-space($value) {
  margin-right: $value;
  &:last-child {
    margin-right: 0;
  }
}

$fontMap: (
  display_large: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-xlarge,
    font-weight: $font-weight-semi-bold,
    line-height: 38px
  ),
  display_medium: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-large,
    font-weight: $font-weight-semi-bold,
    line-height: 32px
  ),
  display_small: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-medium,
    font-weight: $font-weight-semi-bold,
    line-height: 26px
  ),

  heading: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-regular,
    font-weight: $font-weight-semi-bold,
    line-height: 20px
  ),
  heading_light: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-regular,
    font-weight: $font-weight-medium,
    line-height: 20px
  ),
  heading_small: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-semi-bold,
    line-height: 18px
  ),
  heading_xsmall: (
    color: $color-grey-light,
    font-family: $font-family-heading,
    font-size: $font-size-xsmall,
    font-weight: $font-weight-medium,
    line-height: 15px,
    letter-spacing: 1px,
    text-transform: uppercase
  ),

  body: (
    color: $color-grey-darker,
    font-family: $font-family-text,
    font-size: $font-size-regular,
    font-weight: $font-weight-regular,
    line-height: 20px,
  ),
  body_small: (
    color: $color-grey-darker,
    font-family: $font-family-text,
    font-size: $font-size-small,
    font-weight: $font-weight-regular,
    line-height: 18px,
  ),
  body_xsmall: (
    color: $color-grey-darker,
    font-family: $font-family-text,
    font-size: $font-size-xsmall,
    font-weight: $font-weight-regular,
    line-height: 14px,
  ),

  highlight: (
    color: $color-blue,
    font-family: $font-family-text,
    font-size: $font-size-regular,
    font-weight: $font-weight-bold,
    line-height: 20px,
  ),
  highlight_small: (
    color: $color-blue,
    font-family: $font-family-text,
    font-size: $font-size-small,
    font-weight: $font-weight-bold,
    line-height: 18px,
  ),

  label: (
    color: $color-blue,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-medium,
    line-height: 15px,
  ),
  label_big: (
    color: $color-blue,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-semi-bold,
    line-height: 15px,
  ),
  label_optional: (
    color: $color-grey-light,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-medium,
    line-height: 15px,
  ),
  table_title: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-semi-bold,
    line-height: 15px,
  ),
  table_value: (
    color: $color-grey-darker,
    font-family: $font-family-text,
    font-size: $font-size-small,
    font-weight: $font-weight-regular,
    line-height: 16px,
  )
);

/* GLOBAL MIXINS
--------------------------------------------- */

/* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES

  @param {Number}  $responsive  - Viewport-based size
  @param {Number}  $min         - Minimum font size (px)
  @param {Number}  $max         - Maximum font size (px) (optional)

  @param {Number}  $fallback    - Fallback for viewport-based units (optional)

  @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:

  @include responsive-font(5vw, 35px, 150px, 50px);
*/
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == "vh", "height", "width");
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

// Reset
@mixin reset {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

// Used to prevent text selection on an element
@mixin prevent-user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/// Used to hide an element visually, but keeping it accessible for
/// accessibility tools.
@mixin visually-hidden {
  // Need to make sure we override any existing styles.
  position: absolute !important;
  top: 0;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/// To be used on flex items. Resolves some common layout issues, such as
/// text truncation not respecting padding or breaking out of container.
/// https://css-tricks.com/flexbox-truncated-text/
@mixin layout-flex-fix {
  min-width: 0;
  max-width: 100%;
}

// Used to get the mapped font shorthand of $fontMap in _fontsMaps.scss
@mixin font($key) {
  @if map-has-key($fontMap, $key) {
    $font-spec: map-get($fontMap, $key);
    @each $property-name in ('color', 'font-family', 'font-size', 'font-style', 'font-weight', 'line-height', 'letter-spacing', 'text-transform') {
      #{$property-name}: map-get($font-spec, $property-name);
    }
  }
}
/* GLOBAL FUNCTIONS
--------------------------------------------- */

// Create a tint
//
// @param  {Color}  $color to tint
// @param  {Number} $percentage of `$color` in returned color
// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

// Create a shade
//
// @param  {Color}  $color to shade
// @param  {Number} $percentage of `$color` in returned color
// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// Calculate color difference
// See https://www.w3.org/TR/AERT/#color-contrast for algorithm
//
// @param  {Color} $color of foreground
// @param  {Color} $color of background
// @return {Boolean}
@function color-difference($foreground, $background) {
  $r: (max(red($foreground), red($background))) - (min(red($foreground), red($background)));
  $g: (max(green($foreground), green($background))) - (min(green($foreground), green($background)));
  $b: (max(blue($foreground), blue($background))) - (min(blue($foreground), blue($background)));
  $sum-rgb: $r + $g + $b;

  @if $sum-rgb < 350 {
    @return "false";
  } @else {
    @return "true";
  }
}

// Set text color based on contrast
//
// @param  {Color}  $color to set
// @param  {Color}  $background color to test
// @param  {Color}  $fallback color to set in case contrast check fails
@function set-text-color($color, $background, $fallback: null) {
  @if $fallback == null {
    $fallback: #000;
  }
  @if (color-difference($color, $background) == "false") {
    @return $fallback;
  } @else {
    @return $color;
  }
}

/// Darkens the foreground color by the background color. This is the same as the
/// “multiply” filter in graphics apps.
///
/// @param {Color} $foreground - The color to darken.
/// @param {Color} $background - The background to base darkening on.
/// @return {Color} The modified color.
@function color-multiply($foreground, $background: null) {
  @if $background == null {
    $background: #ffffff;
  }

  @return $foreground * $background / 255;
}

/// Returns the value in rem for a given pixel value.
/// @param {Number} $value - The pixel value to be converted.
/// @return {Number} The converted value in rem.
@function rem($value) {
  $unit: unit($value);

  @if $unit == "rem" {
    @return $value;
  } @else if $unit == "px" {
    @return $value / $font-size-base * 1rem;
  } @else if $unit == "em" {
    @return $unit / 1em * 1rem;
  } @else {
    @error "Value must be in px, em, or rem.";
  }
}

/// Returns the value in pixels for a given rem value.
/// @param {Number} $value - The rem value to be converted.
/// @return {Number} The converted value in pixels.
@function px($value) {
  $unit: unit($value);

  @if $unit == "px" {
    @return $value;
  } @else if $unit == "em" {
    @return ($value / 1em) * $font-size-base;
  } @else if $unit == "rem" {
    @return ($value / 1rem) * $font-size-base;
  } @else {
    @error "Value must be in rem, em, or px.";
  }
}

/// Returns the list of available names in a given map.
/// @param {Map} $map - The map of data to list the names from.
/// @param {Number} $map - The level of depth to get names from.
/// @return {String} The list of names in the map.
@function available-names($map, $level: 1) {
  @if type-of($map) != "map" {
    @return null;
  }

  $output: "";
  $newline: "\A ";

  @if $level == 1 {
    @each $key, $value in $map {
      $output: $output + "#{$newline}- #{$key} #{available-names($value, $level + 1)}";
    }
  } @else {
    $output: "(";
    $i: 1;

    @each $key, $value in $map {
      $sep: if($i < length($map), ", ", "");
      $output: $output + "#{$key}#{$sep}#{available-names($value, $level + 1)}";
      $i: $i + 1;
    }

    $output: $output + ")";
  }

  @return $output;
}

@function brighten($hex, $brightness) {
  $r: calc(red($hex)/ 255);
  $g: calc(green($hex) / 255);
  $b: calc(blue($hex)  / 255);

  // Convert to RGB
  $rgb-max:   max($r, $g, $b);
  $rgb-min:   min($r, $g, $b);
  $rgb-delta: $rgb-max - $rgb-min;

  $hue: hue($hex);

  $saturation: 0;
  @if $rgb-max != 0 {
    $saturation: calc($rgb-delta / $rgb-max);
  }
  $saturation: $saturation * 100;

  $brightness: min($rgb-max * 100 + $brightness, 100);

  // Convert to HSLA
  $hsl-lightness:  (2 - calc($saturation / 100)) * (calc($brightness / 2));
  $hsl-saturation: calc(($brightness * $saturation) / if($hsl-lightness < 50, $hsl-lightness * 2, 200 - $hsl-lightness * 2));

  @return hsla($hue, $hsl-saturation * 1%, $hsl-lightness * 1%, 1);
}

@keyframes geoActivityIndicatorSpin {
  100% {
    transform: rotate(360deg);
  }
}

@mixin geo-activity-indicator () {
  height: 100%;
  position: relative;
  width: 100%;

  g {
    animation: geoActivityIndicatorSpin 1s linear infinite;
    animation-play-state: paused;
    transform-origin: 50% 50%;
  }
}

@mixin geo-activity-indicator--animated () {
  g {
    animation-play-state: running;
  }
}

@mixin geo-activity-indicator-make-variant (
  $variant-name,
  $base-color-or-completed-percentage-background: null,
  $nothing-or-background: null
) {
  $completed-percentage-background: $color-blue;
  $background: null;

  @if $base-color-or-completed-percentage-background {
    $completed-percentage-background: $base-color-or-completed-percentage-background;
  }

  @if $nothing-or-background {
    $background: $nothing-or-background;
  } @else {
    $background: rgba($completed-percentage-background, 0.3);
  }

  .geo-activity-indicator__total--#{$variant-name} {
    fill: $background;
  }

  .geo-activity-indicator__completed-path--#{$variant-name} {
    fill: $completed-percentage-background;
  }
}

.geo-activity-indicator {
  @include geo-activity-indicator;
}

.geo-activity-indicator--animated {
  @include geo-activity-indicator--animated;
}

.geo-activity-indicator__inset {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

@include geo-activity-indicator-make-variant(
  'default'
);

@include geo-activity-indicator-make-variant(
  'primary',
  $color-link
);

@include geo-activity-indicator-make-variant(
  'info',
  $color-blue
);

@include geo-activity-indicator-make-variant(
  'success',
  $color-green-darker
);

@include geo-activity-indicator-make-variant(
  'error',
  $color-red-darker
);

@include geo-activity-indicator-make-variant(
  'warn',
  $color-yellow-light
);

@include geo-activity-indicator-make-variant(
  'progress',
  $color-link
);

@include geo-activity-indicator-make-variant(
  'dark-transparent',
  $color-white
);

.geo-alert {
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: $border-radius-default;
  display: flex;
  flex-direction: row;
  padding: $space-x-small $space-small;
  width: 100%;

  .geo-alert__icon {
    flex-grow: 0;
    flex-shrink: 0;
    font-size: $font-size-regular;
    margin: ($space-x-small - 2px) $space-small 0 0;
  }

  .geo-alert__content {
    @include font($body);

    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
  }
}

.geo-alert--info {
  background: $color-blue-readable-background;
  border-color: $color-blue-readable-border;

  .geo-alert__icon {
    color: $color-blue;
  }
}

.geo-alert--success {
  background: $color-green-readable-background;
  border-color: $color-green-readable-border;

  .geo-alert__icon {
    color: $color-green;
  }
}

.geo-alert--warning {
  background: $color-yellow-readable-background;
  border-color: $color-yellow-readable-border;

  .geo-alert__icon {
    color: $color-yellow;
  }
}

.geo-alert--error {
  background: $color-red-readable-background;
  border-color: $color-red-readable-border;

  .geo-alert__icon {
    color: $color-red;
  }
}

.geo-bordered-box-column {
  background: $color-white;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: start;
  overflow: hidden;
  padding: $space-small;

  &:not(:first-child) {
    border-left: 1px solid $color-grey;
  }
}

.geo-bordered-box-footer {
  background: $color-white-dark;
  border-top: 1px solid $color-grey;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 10px;
  white-space: nowrap;
}

.geo-bordered-box-header-search-form {
  align-items: center;
  margin: $space-small;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;

  .geo-input .geo-input__input {
    height: 30px;
    font-size: $font-size-small;
  }
}

.geo-bordered-box-header {
  @include font($heading-small);

  align-items: center;
  background: $color-white-dark;
  border-bottom: 1px solid $color-grey;
  color: $color-grey-darker;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  height: 40px;
  justify-content: space-between;
  padding: 0 7px 0 5px;
  white-space: nowrap;

  .geo-bordered-box-header__icon-and-label {
    align-items: center;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    &:first-child:last-child {
      margin-right: 10px;
    }
  }

  .geo-bordered-box-header__label {
    overflow: hidden;
  }

  .geo-bordered-box-header__label:first-child:last-child {
    margin-left: 10px;
  }

  .geo-bordered-box-header__icon-container {
    color: $color-grey-light;
    cursor: pointer;
    margin-right: 10px;

    &:hover {
      color: $color-grey-darker;
    }
  }

  .geo-bordered-box-header__trailing-button {
    align-items: center;
    color: $color-grey-light;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-left: 10px;

    &:hover {
      color: $color-grey-darker;
    }
  }
}

.geo-bordered-box {
  background: $color-white;
  border: 1px solid $color-grey;
  border-radius: $border-radius-default;
  box-shadow: $box-shadow-regular;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.geo-bordered-token {
  align-items: center;
  background: $color-white-dark;
  border: 1px solid $color-grey;
  border-radius: $border-radius-default;
  display: flex;
  min-height: 30px;
  padding: 0 $space-small;
  user-select: none;

  .geo-bordered-token__icon {
    color: $color-grey-light;
    margin-right: 5px;
  }

  .geo-bordered-token__label {
    color: $color-grey-darker;
    font-family: $font-family-text;
  }
  
  &--disabled {
    background: $color-grey;
    cursor: not-allowed;
  }
}

// Creates a geo-button color scheme varying the background and text color based
// on the hover/focus/disabled status.
@mixin geo-button-make-scheme ($params) {
  $hoverYOffsetWithBorders: -3px;

  & {
    @if map-has-key($params, normal-background-color) {
      background: map-get($params, normal-background-color);
    }

    @if map-has-key($params, normal-text-color) {
      color: map-get($params, normal-text-color);
    }

    @if map-has-key($params, normal-border-color) {
      border-color: map-get($params, normal-border-color);
    }

    &::before {
      bottom: 0;
      content: "";
      left: 0;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity $easing-base $duration-noticeable;

      @if map-has-key($params, hover-shadow) {
        box-shadow: map-get($params, hover-shadow);
      }
    }

    /* This pseudo-element prevents hover flickering due to button translation
       on hover. To do so efficiently this element is positioned at the beginning
       and moved using a transform when parent is hovered */
    &::after {
      /* Basic setup */
      content: "";
      bottom: 0;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;

      /* We need to place the pseudo-element under everything else. Without
        specifying the placement, it will sit on top of the parent element (our
        card) and block the user from selecting text or clicking links */
      z-index: -1;
    }

    &:hover, &[hover], &:focus, &[focus] {
      @if map-has-key($params, hover-transform) {
        transform: map-get($params, hover-transform);
        transition: transform $easing-base $duration-noticeable;

        &::before {
          opacity: 1;
        }

        &::after {
          /* Bottom is positioned to cover the area the hovered element is leaving */
          transform: translateY(-$hoverYOffsetWithBorders);
        }
      }

      @if map-has-key($params, hover-decoration) {
        text-decoration: map-get($params, hover-decoration);
      }

      @if map-has-key($params, hover-background-color) {
        background: map-get($params, hover-background-color);
      }

      @if map-has-key($params, hover-text-color) {
        color: map-get($params, hover-text-color);
      }

      @if map-has-key($params, hover-border-color) {
        border-color: map-get($params, hover-border-color);
      }
    }

    &:active {
      @if map-has-key($params, hover-transform) {
        transform: none;
      }

      @if map-has-key($params, hover-decoration) {
        text-decoration: none;
      }
    }
  }

  &--disabled {
    @if map-has-key($params, disabled-background-color) {
      background: map-get($params, disabled-background-color);
    }

    @if map-has-key($params, disabled-text-color) {
      color: map-get($params, disabled-text-color);
    }

    @if map-has-key($params, disabled-border-color) {
      border-color: map-get($params, disabled-border-color);
    }

    &:hover, &[hover], &:focus, &[focus] {
      &::before {
        opacity: 0;
      }

      @if map-has-key($params, hover-transform) {
        transform: none;
      }

      @if map-has-key($params, hover-decoration) {
        text-decoration: none;
      }

      @if map-has-key($params, hover-shadow) {
        box-shadow: none;
      }

      @if map-has-key($params, hover-and-disabled-background-color) {
        background: map-get($params, hover-and-disabled-background-color);
      } @else if map-has-key($params, disabled-background-color) {
        background: map-get($params, disabled-background-color);
      } @else if map-has-key($params, hover-background-color) {
        background: map-get($params, hover-background-color);
      }

      @if map-has-key($params, hover-and-disabled-border-color) {
        border-color: map-get($params, hover-and-disabled-border-color);
      } @else if map-has-key($params, disabled-border-color) {
        border-color: map-get($params, disabled-border-color);
      } @else if map-has-key($params, hover-border-color) {
        border-color: map-get($params, hover-border-color);
      }

      @if map-has-key($params, hover-and-disabled-text-color) {
        color: map-get($params, hover-and-disabled-text-color);
      } @else if map-has-key($params, disabled-text-color) {
        color: map-get($params, disabled-text-color);
      } @else if map-has-key($params, hover-text-color) {
        color: map-get($params, hover-text-color);
      }
    }
  }
}

.geo-button {
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-family: $font-family-text;
  font-size: $font-size-small;
  font-weight: $font-weight-bold;
  height: 30px;
  letter-spacing: 1px;
  line-height: 1.25em;
  position: relative;
  text-transform: uppercase;
  user-select: none;

  .geo-button__label {
    padding: .58em .83em .67em .83em;
    transition: all $duration-noticeable $easing-base;
    transition-property: transform, opacity;
  }

  .geo-button__label--loading {
    transform: scale(0);
    opacity: 0;
  }

  .geo-button__activity-indicator {
    height: 20px;
    position: absolute;
    width: 20px;
  }
}

.geo-button--loading {
  cursor: progress;
}

.geo-button--disabled {
  cursor: not-allowed;
}

.geo-button--primary {
  $hoverYOffset: -1px;

  @include geo-button-make-scheme((
    normal-background-color: $color-blue,
    normal-text-color: $color-white,
    disabled-background-color: $color-grey,
    disabled-text-color: $color-grey-light,
    hover-and-disabled-background-color: $color-grey,
    hover-shadow: $box-shadow-button-hover,
    hover-transform: translateY($hoverYOffset)
  ));

  transition: all $duration-quickly $easing-base;
  transition-property: background-color;
}

.geo-button--secondary {
  $hoverYOffset: -1px;

  @include geo-button-make-scheme((
    normal-background-color: $color-white,
    normal-text-color: $color-blue,
    normal-border-color: $color-blue,
    disabled-background-color: $color-white-disabled,
    disabled-text-color: $color-grey-light,
    disabled-border-color: $color-grey,
    hover-shadow: $box-shadow-button-hover,
    hover-transform: translateY($hoverYOffset)
  ));

  transition: all $duration-quickly $easing-base;
  transition-property: background-color, border-color, color;
}

.geo-button--tertiary {
  @include geo-button-make-scheme((
    normal-background-color: transparent,
    normal-text-color: $color-blue,
    normal-border-color: transparent,
    disabled-text-color: $color-grey-light,
    hover-decoration: underline
  ));

  font-style: italic;
  font-weight: $font-weight-regular;
  font-size: $font-size-regular;
  letter-spacing: initial;
  text-transform: initial;

  transition: color $duration-quickly $easing-base;
}

.geo-button--danger {
  $hoverYOffset: -1px;

  @include geo-button-make-scheme((
    normal-background-color: $color-red,
    normal-text-color: $color-white,
    disabled-background-color: $color-white-disabled,
    disabled-text-color: $color-grey-light,
    disabled-border-color: $color-grey,
    hover-shadow: $box-shadow-button-hover,
    hover-transform: translateY($hoverYOffset)
  ));

  transition: all $duration-quickly $easing-base;
  transition-property: background-color, border-color, color;
}

.geo-button--link {
  @include geo-button-make-scheme((
    normal-background-color: transparent,
    normal-text-color: $color-blue,
    normal-border-color: transparent,
    disabled-text-color: $color-grey-light,
    hover-decoration: underline
  ));

  display: inline-flex;
  font-style: italic;
  font-weight: $font-weight-regular;
  font-size: $font-size-regular;
  justify-content: flex-start;
  letter-spacing: initial;
  text-transform: initial;
  transition: color $duration-quickly $easing-base;

  .geo-button__label {
    padding: 0;
  }
}

.geo-button--dangerLink {
  @include geo-button-make-scheme((
    normal-background-color: transparent,
    normal-text-color: $color-red,
    normal-border-color: transparent,
    disabled-text-color: $color-grey-light,
    hover-decoration: underline
  ));

  font-style: italic;
  font-weight: $font-weight-regular;
  font-size: $font-size-regular;
  justify-content: flex-start;
  letter-spacing: initial;
  text-transform: initial;
  transition: color $duration-quickly $easing-base;

  .geo-button__label {
    padding: 0;
  }
}

.geo-button--tooltip {
  @include geo-button-make-scheme((
    normal-background-color: transparent,
    normal-text-color: $color-yellow,
    hover-text-color: $color-yellow-dark,
    disabled-text-color: $color-grey-light,
  ));

  transition: all $duration-quickly $easing-base;
  transition-property: background-color, border-color, color;
}

.geo-external-link-button a {
  @include font($body);

  color: $color-blue;
}

.geo-calendar-dropdown__popup {
  .geo-bordered-box {
    box-sizing: border-box;
  }

  .geo-scrollable-container__body {
    max-height: var(--available-height);
  }
}

@mixin time-unit-button-reset {
  background: none;
  border: inherit;
  cursor: pointer;
  height: 100%;
  outline: 0;
  padding: inherit;
}

@mixin time-unit-unavailable {
  cursor: not-allowed;

  .geo-calendar-grid__date-picker-unit__placeholder,
  .geo-calendar-grid__date-picker-unit {
    pointer-events: none;
  }
}

.geo-calendar-grid {
  $day-unit-size: 25px;
  $border-radius-selected-date-unit: 50vh;

  // COMMON ELEMENTS
  .geo-calendar-grid__date-picker-unit {
    @include font($body-small);
    @include time-unit-button-reset;

    &:hover .geo-calendar-grid__date-picker-unit__placeholder {
      background: $color-blue-readable-background;
      border: 1px solid $color-blue;
      color: $color-grey-darker;
    }
  }

  .geo-calendar-grid__date-picker-unit--within-range {
    background: $color-blue-readable-background;
  }

  .geo-calendar-grid__date-picker-unit--unavailable:hover .geo-calendar-grid__date-picker-unit__placeholder {
    background: transparent;
    border: none;
    color: inherit;
  }

  .geo-calendar-grid__date-picker-unit--selected:hover .geo-calendar-grid__date-picker-unit__placeholder {
    background: $color-blue;
    border: none;
    color: $color-white;
  }

  .geo-calendar-grid__date-picker-unit--selected .geo-calendar-grid__date-picker-unit__placeholder {
    background: $color-blue;
    border-radius: $border-radius-selected-date-unit;
    color: $color-white;
  }

  .geo-calendar-grid__date-picker-unit--unavailable {
    @include time-unit-unavailable;
    color: $color-grey;
    text-decoration: line-through;
  }

  .geo-calendar-grid__date-picker-unit--from-date {
    border-top-left-radius: $border-radius-selected-date-unit;
    border-bottom-left-radius: $border-radius-selected-date-unit;
  }

  .geo-calendar-grid__date-picker-unit--to-date {
    border-top-right-radius: $border-radius-selected-date-unit;
    border-bottom-right-radius: $border-radius-selected-date-unit;
  }

  .geo-calendar-grid__month-unit,
  .geo-calendar-grid__year-unit {
    .geo-calendar-grid__date-picker-unit__placeholder {
      border: 1px solid transparent;
      margin: 0;
      padding: 3px 0;
    }

    &:hover .geo-calendar-grid__date-picker-unit__placeholder {
      border-radius: $border-radius-selected-date-unit;
    }
  }

  // DAYS GRID VIEW
  .geo-calendar-grid__weekdays-row-container {
    @include font($label-optional);

    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(7,1fr);
    -ms-grid-template-columns: repeat(7,1fr);
    text-align: center;
    border-bottom: 1px solid $color-white-darker;
    padding-bottom: $space-x-small;
  }

  .geo-calendar-weekdays-row__weekday-name {
    text-transform: capitalize;
  }

  .geo-calendar-grid__day-container {
    display: grid;
    display: -ms-grid;
    margin-top: $space-small;
    grid-row-gap: $space-small;
    -ms-grid-row-gap: $space-small;
  }

  .geo-calendar-grid__week-unit {
    align-items: center;
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(7, 1fr);
    -ms-grid-template-columns: repeat(7, 1fr);
    grid-template-rows: calc(#{$day-unit-size} + 2px);
    -ms-grid-template-rows: calc(#{$day-unit-size} + 2px);
    text-align: center;
  }

  .geo-calendar-grid__week-unit--unavailable {
    @include time-unit-unavailable;
    color: $color-grey;
  }

  .geo-calendar-grid__week-unit--is-week-granularity:hover {
    background: $color-blue-readable-background;
    border-radius: $border-radius-selected-date-unit;
    color: $color-grey-darker;
  }

  .geo-calendar-grid__date-picker-unit--today {
    .geo-calendar-grid__date-picker-unit__placeholder {
      &::after {
        $today-mark-height: 2px;
        background: $color-yellow;
        bottom: $today-mark-height * 2;
        content: '';
        height: $today-mark-height;
        left: 0;
        margin: 0 auto;
        position: absolute;
        right: 0;
        width: 15px;
      }
    }
  }

  .geo-calendar-grid__day-unit {
    line-height: $day-unit-size;
    position: relative;

    .geo-calendar-grid__date-picker-unit__placeholder {
      box-sizing: border-box;
      position: relative;
    }

    &:hover {
      .geo-calendar-grid__date-picker-unit__placeholder {
        border-radius: 50%;
        box-sizing: content-box;
        margin: 0 auto;
        width: $day-unit-size;
      }
    }
  }

  .geo-calendar-grid__day-unit.geo-calendar-grid__date-picker-unit--out-of-boundaries {
    color: $color-grey-light;
  }

  .geo-calendar-grid__day-unit.geo-calendar-grid__date-picker-unit--unavailable {
    color: $color-grey;
  }

  .geo-calendar-grid__day-unit.geo-calendar-grid__date-picker-unit--from-date {
    padding-left: 0;

    .geo-calendar-grid__date-picker-unit__placeholder {
      margin: 0 auto;
    }
  }

  .geo-calendar-grid__day-unit.geo-calendar-grid__date-picker-unit--to-date {
    padding-right: 0;

    .geo-calendar-grid__date-picker-unit__placeholder {
      margin: 0 auto;
    }
  }

  .geo-calendar-grid__day-unit.geo-calendar-grid__date-picker-unit--selected .geo-calendar-grid__date-picker-unit__placeholder {
    box-sizing: content-box;
    height: $day-unit-size;
    width: $day-unit-size;
  }

  // MONTHS GRID VIEW
  .geo-calendar-grid__month-container {
    display: grid;
    display: -ms-grid;
    grid-row-gap: calc(#{$space-base - $space-x-small});
    -ms-grid-row-gap: $space-small;
  }

  .geo-calendar-grid__quarter-unit {
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-template-columns: repeat(7, 1fr);
  }

  .geo-calendar-grid__quarter-unit--highlighted,
  .geo-calendar-grid__quarter-unit--actionable:hover {
    background: $color-blue-readable-background;
    border-radius: $border-radius-selected-date-unit;
    color: $color-grey-darker;
  }

  .geo-calendar-grid__quarter-unit--unavailable {
    @include time-unit-unavailable;
    color: $color-grey;
  }

  // YEARS GRID VIEW
  .geo-calendar-grid__year-container {
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(4, 1fr);
    -ms-grid-template-columns: repeat(7, 1fr);
    grid-row-gap: $space-base;
    -ms-grid-row-gap: $space-small;
  }
}

.geo-calendar-picker {
  // GEO CALENDAR NAVIGATION STYLES
  .geo-calendar-navigation {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: $space-base 0;
  }

  .geo-button--link--calendar-navigation-toggle-button {
    font-weight: $font-weight-bold;
  }

  .geo-button__label--calendar-navigation-toggle-button {
    align-items: flex-end;
    display: flex;
    text-transform: capitalize;
  }

  .geo-calendar-navigation__selects-container {
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    width: 50%;
  }

  .geo-calendar-navigation-toggle-button-icon {
    @include font($label-optional);

    margin-left: $space-x-small;
  }

  .geo-calendar-navigation__nav-icon {
    @include font($label-optional);

    cursor: pointer;
  }

  .geo-calendar-navigation__nav-icon--disabled {
    color: $color-grey;
    cursor: not-allowed;
  }

  .geo-calendar-navigation--disabled {
    color: $color-grey;
    cursor: not-allowed;
    text-decoration: line-through;
  }
}

.geo-calendar-navigation-selection .geo-list-item {
  margin: 0;
  padding: $space-small $space-small;
}

.geo-calendar {
  $calendar-input-height: 30px;

  display: flex;

  // GEO CALENDAR GRANULARITY SIDEBAR
  .geo-calendar-picker-granularity-unit {
    @include font($body-small);

    align-items: center;
    border-radius: $border-radius-default;
    color: $color-grey-dark;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin-bottom: $space-x-small;
    padding: $space-x-small $space-small;

    &:not(.geo-calendar-picker-granularity-unit--active):hover {
      background: $color-white-darker;

      .geo-calendar-picker-granularity-unit__selector-icon {
        visibility: visible;
      }
    }

    &--active {
      background: $color-blue;
      color: $color-white;

      .geo-calendar-picker-granularity-unit__selector-icon {
        color: $color-white-dark;
        visibility: visible;
      }
    }
  }

  .geo-calendar-picker-granularity-unit__selector-icon {
    color: $color-grey-light;
    display: inline;
    margin-left: $space-small;
    visibility: hidden;
  }

  .geo-calendar__sidebar-container {
    background: $color-white-dark;
    border-right: 1px solid $color-grey;
    box-sizing: border-box;
    flex-grow: 1;
    flex-shrink: 0;
    padding: $space-small;
  }

  // GEO CALENDAR INPUT CONTROLS
  .geo-calendar__picker-controls {
    box-sizing: content-box;
    padding: $space-base;
  }

  .geo-calendar__input-ranges {
    align-items: baseline;
    border-bottom: 1px solid $color-grey;
    display: flex;
    justify-content: space-evenly;
    padding-bottom: $space-base;
  }


  .geo-calendar__input {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }
  
  .geo-calendar-input__date-feedback--error {
    @include font($label);

    color: $color-red;
    margin-top: $space-x-small;
  }

  .geo-editable-input__container--geo-calendar {
    height: $calendar-input-height;
  }

  .geo-editable-input-form__input--geo-calendar {
    @include font($body-small);

    height: calc(#{$calendar-input-height} - 2px); //2px of border in the inner input
  }

  .geo-calendar__input-range-icon {
    @include font($label-optional);

    margin: 0 $space-small;
  }

  .geo-button--calendar-picker-button > .geo-button__label--calendar-picker-button {
    padding-left: 0;
  }
}


.geo-chart {
  &, svg {
    height: 100%;
    width: 100%;
  }

  .hide-paths path {
    visibility: hidden;
  }

  .hide-lines line {
    visibility: hidden;
  }

  .hide-text text {
    visibility: hidden;
  }

  .rect-fill-none rect {
    fill: none;
  }

  .geo-chart-guidelines {
    .domain {
      stroke: $color-grey;
    }

    .tick line {
      stroke: $color-grey;
    }
  }

  .geo-chart-axis-label {
    fill: $color-black;
  }

  .geo-chart-axis-text {
    display: flex;
    flex-direction: row;
    width: 100%;
    .geo-chart-axis-text__content {
      max-width: 95%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .geo-chart-axis-text--left {
    justify-content: flex-end;
  }

  .geo-chart-axis-text--right {
    justify-content: flex-start;
  }
  .geo-chart-value-label--small{
    font-size:9px
  }
  .geo-chart-value-label--medium{
    font-size:13px
  }
  .geo-chart-axis-label--edge-case {
    fill: $color-white;
  }
}

.geo-chart-quadrant-line {
  color: $color-blue;
}

.geo-chart-tooltip {
  // These styles are directly taken from vue-directive-tooltip so Chart
  // tooltips look like regular tooltips.

  $popper-background-color: $color-dark-overlay !default;
  $popper-tooltip-arrow-size: 5px;

  background-color: $popper-background-color;
  border-radius: 3px;
  box-sizing: border-box;
  color: $color-white;
  max-width: 320px;
  padding: 6px 10px;
  z-index: 100;

  .geo-chart-tooltip__content {
    text-align: center;
  }

  .geo-chart-tooltip__arrow {
    border-style: solid;
    content: '';
    height: 0;
    margin: $popper-tooltip-arrow-size;
    position: absolute;
    width: 0;
  }

  &.n {
    margin-bottom: $popper-tooltip-arrow-size;

    .geo-chart-tooltip__arrow {
      border-bottom-color: transparent !important;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: $popper-background-color;
      border-width: $popper-tooltip-arrow-size $popper-tooltip-arrow-size 0 $popper-tooltip-arrow-size;
      bottom: -$popper-tooltip-arrow-size;
      left: 50%;
      margin-top: 0;
      margin-bottom: 0;
      transform: translateX(-100%);
    }
  }

  &.s {
    margin-top: $popper-tooltip-arrow-size;

    .geo-chart-tooltip__arrow {
      border-bottom-color: $popper-background-color;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      border-width: 0 $popper-tooltip-arrow-size $popper-tooltip-arrow-size $popper-tooltip-arrow-size;
      left: 50%;
      margin-top: 0;
      margin-bottom: 0;
      top: -$popper-tooltip-arrow-size;
      transform: translateX(-100%);
    }
  }

  &.e {
    margin-left: $popper-tooltip-arrow-size;

    .geo-chart-tooltip__arrow {
      border-bottom-color: transparent !important;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-right-color: $popper-background-color;
      border-width: $popper-tooltip-arrow-size $popper-tooltip-arrow-size $popper-tooltip-arrow-size 0;
      left: -$popper-tooltip-arrow-size;
      margin-left: 0;
      margin-right: 0;
      top: 50%;
      transform: translateY(-100%);
    }
  }

  &.w {
    margin-right: $popper-tooltip-arrow-size;

    .geo-chart-tooltip__arrow {
      border-bottom-color: transparent !important;
      border-left-color: $popper-background-color;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      border-width: $popper-tooltip-arrow-size 0 $popper-tooltip-arrow-size $popper-tooltip-arrow-size;
      margin-left: 0;
      margin-right: 0;
      right: -$popper-tooltip-arrow-size;
      top: 50%;
      transform: translateY(-100%);
    }
  }
}

.geo-chart--debug {
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 0px);
  background-position: -0.5px -0.5px;
}

@mixin make-circle-variants {
  $background-color-by-variant: (
    default: $color-blue,
    primary: $color-blue,
    success: $color-green,
    info: $color-blue-light,
    warn: $color-yellow,
    error: $color-red,
    disabled: $color-grey
  );

  @each $variant, $background-color in $background-color-by-variant {
    .geo-#{$variant}-circle {
      background: $background-color;
    }
  }
}

.geo-circle {
  border-radius: 100%;
  height: 10px;
  width: 10px;
}

@include make-circle-variants;

.geo-collapsable-box {
  border: 1px solid $color-grey;
  border-radius: $border-radius-default;
  box-shadow: $box-shadow-small;
  padding: $space-small 0;
  width: 100%;

  .geo-collapsable-box__header {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 $space-small;

    width: 100%;
  }

  .geo-collapsable-box__header-content {
    @include font($heading);
  }

  .geo-collapsable-box__toggle-icon {
    color: $color-grey-light;
    font-size: $font-size-small;
    transition: transform $easing-base $duration-noticeable;
  }

  .geo-collapsable-box__trailing-items {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .geo-collapsable-box__body {
    display: flex;
    flex-direction: row;
    height: auto;
    overflow-y: hidden;
    padding: $space-small $space-small 0 $space-small;
  }
}

.geo-collapsable-box--expanded {
  .geo-collapsable-box__toggle-icon {
    transform: rotate(180deg);
  }
}

.geo-collapsable-box--disabled, .geo-collapsable-box--disabled .geo-collapsable-box__header {
  cursor: not-allowed;
}

// Creates a geo-compact-button color scheme varying the background and text color based
// on the hover/focus/disabled status.
@mixin geo-compact-button-make-scheme ($params) {
  $hoverYOffsetWithBorders: -3px;

  & {
    @if map-has-key($params, normal-background-color) {
      background: map-get($params, normal-background-color);
    }

    @if map-has-key($params, normal-text-color) {
      color: map-get($params, normal-text-color);
    }

    @if map-has-key($params, normal-border-color) {
      border-color: map-get($params, normal-border-color);
    }

    &::before {
      bottom: 0;
      content: "";
      left: 0;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity $easing-base $duration-noticeable;

      @if map-has-key($params, hover-shadow) {
        box-shadow: map-get($params, hover-shadow);
      }
    }

    /* This pseudo-element prevents hover flickering due to button translation
       on hover. To do so efficiently this element is positioned at the beginning
       and moved using a transform when parent is hovered */
    &::after {
      /* Basic setup */
      content: "";
      bottom: 0;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;

      /* We need to place the pseudo-element under everything else. Without
        specifying the placement, it will sit on top of the parent element (our
        card) and block the user from selecting text or clicking links */
      z-index: -1;
    }

    &:hover, &[hover], &:focus, &[focus] {
      @if map-has-key($params, hover-transform) {
        transform: map-get($params, hover-transform);
        transition: transform $easing-base $duration-noticeable;

        &::before {
          opacity: 1;
        }

        &::after {
          /* Bottom is positioned to cover the area the hovered element is leaving */
          transform: translateY(-$hoverYOffsetWithBorders);
        }
      }

      @if map-has-key($params, hover-decoration) {
        text-decoration: map-get($params, hover-decoration);
      }

      @if map-has-key($params, hover-background-color) {
        background: map-get($params, hover-background-color);
      }

      @if map-has-key($params, hover-text-color) {
        color: map-get($params, hover-text-color);
      }

      @if map-has-key($params, hover-border-color) {
        border-color: map-get($params, hover-border-color);
      }
    }

    &:active {
      @if map-has-key($params, hover-transform) {
        transform: none;
      }

      @if map-has-key($params, hover-decoration) {
        text-decoration: none;
      }
    }
  }

  &--disabled {
    @if map-has-key($params, disabled-background-color) {
      background: map-get($params, disabled-background-color);
    }

    @if map-has-key($params, disabled-text-color) {
      color: map-get($params, disabled-text-color);
    }

    @if map-has-key($params, disabled-border-color) {
      border-color: map-get($params, disabled-border-color);
    }

    &:hover, &[hover], &:focus, &[focus] {
      &::before {
        opacity: 0;
      }

      @if map-has-key($params, hover-transform) {
        transform: none;
      }

      @if map-has-key($params, hover-decoration) {
        text-decoration: none;
      }

      @if map-has-key($params, hover-shadow) {
        box-shadow: none;
      }

      @if map-has-key($params, hover-and-disabled-background-color) {
        background: map-get($params, hover-and-disabled-background-color);
      } @else if map-has-key($params, disabled-background-color) {
        background: map-get($params, disabled-background-color);
      } @else if map-has-key($params, hover-background-color) {
        background: map-get($params, hover-background-color);
      }

      @if map-has-key($params, hover-and-disabled-border-color) {
        border-color: map-get($params, hover-and-disabled-border-color);
      } @else if map-has-key($params, disabled-border-color) {
        border-color: map-get($params, disabled-border-color);
      } @else if map-has-key($params, hover-border-color) {
        border-color: map-get($params, hover-border-color);
      }

      @if map-has-key($params, hover-and-disabled-text-color) {
        color: map-get($params, hover-and-disabled-text-color);
      } @else if map-has-key($params, disabled-text-color) {
        color: map-get($params, disabled-text-color);
      } @else if map-has-key($params, hover-text-color) {
        color: map-get($params, hover-text-color);
      }
    }
  }
}

.geo-compact-button {
  @include font($body-small);

  align-items: center;
  border-radius: $border-radius-default;
  box-shadow: $box-shadow-small;
  cursor: pointer;
  display: flex;
  height: $space-base;
  justify-content: center;
  outline: none;
  padding: 0;
  position: relative;
  width: $space-base;

  .geo-compact-button__icon {
    margin-left: $space-x-small;
    padding: .58em .83em .67em .83em;
    transition: all $duration-noticeable $easing-base;
    transition-property: transform, opacity;
  }

  .geo-compact-button__icon--loading {
    transform: scale(0);
    opacity: 0;
  }

  .geo-compact-button__activity-indicator {
    height: 16px;
    position: absolute;
    width: 16px;
  }

  &--loading {
    cursor: progress;
  }

  &--disabled {
    cursor: not-allowed;
  }
}

.geo-compact-button--primary {
  $hoverYOffset: -1px;

  @include geo-compact-button-make-scheme((
    disabled-background-color: $color-grey,
    disabled-text-color: $color-grey-light,
    disabled-border-color: $color-grey,
    hover-and-disabled-background-color: $color-grey,
    hover-shadow: $box-shadow-button-hover,
    hover-transform: translateY($hoverYOffset)
  ));

  background-color: $color-blue;
  border: 1px solid $color-blue;
  color: $color-white;
  margin-left: $space-x-small;
  transition: all $duration-quickly $easing-base;
  transition-property: background-color;
}

.geo-compact-button--secondary{
  $hoverYOffset: -1px;

  @include geo-compact-button-make-scheme((
    disabled-background-color: $color-grey,
    disabled-text-color: $color-grey-light,
    disabled-border-color: $color-grey,
    hover-and-disabled-background-color: $color-grey,
    hover-shadow: $box-shadow-button-hover,
    hover-transform: translateY($hoverYOffset)
  ));

  background-color: $color-white;
  border: 1px solid $color-grey;
  color: $color-grey;
  transition: all $duration-quickly $easing-base;
  transition-property: background-color, border-color, color;
}

.geo-compact-button--danger {
  $hoverYOffset: -1px;

  @include geo-compact-button-make-scheme((
    normal-background-color: $color-red,
    normal-text-color: $color-white,
    disabled-background-color: $color-grey,
    disabled-text-color: $color-grey-light,
    disabled-border-color: $color-grey,
    hover-and-disabled-background-color: $color-grey,
    hover-shadow: $box-shadow-button-hover,
    hover-transform: translateY($hoverYOffset)
  ));

  border-color: transparent;
  transition: all $duration-quickly $easing-base;
  transition-property: background-color, border-color, color;
}

.geo-compact-button--inputAccessory {
  @include geo-compact-button-make-scheme((
    normal-background-color: transparent,
    hover-background-color: rgba($color-dark-overlay, .1),
    disabled-background-color: transparent,
    disabled-text-color: $color-grey-light,
  ));

  border: none;
  box-shadow: none;
  color: $color-grey-light;
  transition: all $duration-quickly $easing-base;
  transition-property: background-color, border-color, color;
}

.geo-dropdown__compact-button-container {
  align-items: center;

  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: $color-grey-darker;

  cursor: pointer;
  display: flex;
  font-size: $font-size-regular;
  height: 2em;
  justify-content: center;
  padding: 0.35em;
  width: 1.2em;

  &:hover {
    background-color: $color-white;
    border-color: $color-blue;
    color: $color-blue;
  }
}

.geo-dropdown__compact-button-container--disabled {
  cursor: not-allowed;

    .geo-dropdown__compact-button-container__icon {
      color: $color-grey-light;
    }
    &:hover {
      background-color: transparent;
      border: none;
    }
}

.geo-dropdown-regular-button-container {
  align-items: center;
  background-color: $color-white;
  border: 1px solid $color-grey;
  border-radius: $border-radius-default;
  color: $color-grey-darker;
  cursor: pointer;
  display: flex;
  font-family: $font-family-text;
  font-size: $font-size-regular;
  height: 40px;
  justify-content: center;
  line-height: $line-height-base;
  padding: 0 10px;

  &:hover, &[hover] {
    border-color: $color-blue;

    .geo-dropdown-regular-button-container__icon {
      color: $color-blue;
    }
  }

  strong {
    color: $color-blue;
    font-weight: $font-weight-bold;
  }
}

.geo-dropdown-regular-button-container__icon {
  &--left {
    margin-right: 5px;
    order: 1;
  }

  &--right {
    margin-left: 5px;
    order: 2;
  }

  &:last-child {
    margin: 0;
  }
}

.geo-dropdown-regular-button-container__content {
  order: 1;
}

.geo-dropdown-regular-button-container--disabled {
  cursor: not-allowed;

  &, &:hover, &[hover] {
    background-color: $color-white-dark;
    border-color: $color-grey;

    .geo-dropdown-regular-button-container__icon {
      color: $color-grey-light;
    }
  }
}

.geo-dropdown-regular-button-container--active {
  &, &:hover, &[hover] {
    background-color: $color-blue;
    border-color: $color-blue;
    color: $color-white;

    strong, .geo-dropdown-regular-button-container__icon {
      color: $color-yellow-light;
    }
  }
}

.geo-dropdown__select-button {
  &.geo-dropdown-regular-button-container {
    justify-content: space-between;
  }

  .geo-dropdown-regular-button-container__icon {
    transition: transform .08s ease-in-out;
  }
}

.geo-dropdown--is-open {
  .geo-dropdown__select-button .geo-dropdown-regular-button-container__icon {
    transform: rotateZ(-180deg);
  }
}
.geo-dropdown {
  display: flex;
  font-family: $font-family-text;
  font-size: $font-size-regular;
  user-select: none;
}

.geo-dropdown__popup {
  // Use this variable to customize the space between toggle button popup
  --spacing-to-toggle-button: 5;

  // You can use these variables to consider available space depending on the
  // position of the tooltip. They are automatically set whenever tooltip is
  // positioned:
  //
  // --available-width
  // --available-height

  display: none;
  overflow: hidden;
  position: fixed;
  user-select: none;
  z-index: $z-index-sticky;
}

.geo-dropdown__popup--is-open {
  display: flex;
  flex-direction: column;
}

.geo-editable-input__container {
  align-items: center;
  background: $color-white;
  border: 1px solid $color-grey;
  box-sizing: border-box;
  display: flex;
  height: 40px;
  padding: 5px;
  width: 100%;

  .geo-dropdown {
    width: 100%;
  }
}

.geo-editable-input__container-normal {
  border-radius: $border-radius-default;
}

.geo-editable-input__container-normal--edit {
  border: 1px solid $color-blue;
  box-shadow: $box-shadow-focus;
}

.geo-editable-input__container-table {
  &:hover {
    background-color: $color-white-dark;

    .geo-editable-input-form__input {
      border: 1px solid $color-grey;
    }
  }
}

.geo-editable-input__container-table--edit {
  background-color: $color-white-dark;

  .geo-editable-input-form__input {
    border: 1px solid $color-grey;
  }
}

.geo-editable-input__container--disabled:hover {
  background-color: $color-white;

  .geo-editable-input-form__input {
    border: 1px solid transparent;
  }
}

.geo-editable-input-form__input {
  border: 1px solid transparent;
  border-radius: $border-radius-default;
  box-sizing: border-box;
  font-size: $font-size-regular;
  height: 30px;
  padding: 0 5px;
  width: 100%;

  &:focus {
    outline: none;
  }

  &::placeholder {
    color: $color-grey-light;
  }
}

.geo-editable-input__buttons-container {
  display: flex;
  justify-content: flex-end;
}

.geo-editable-input__form {
  width: 100%;
}

.geo-editable-input__form {
  align-items: center;
  display: flex;
}

.geo-editable-input__popup {
  border: none;
  background-color: transparent;
  overflow: visible;

  .geo-activity-indicator {
    height: 12px;
  }
}

.geo-editable-input__popup--table {
  --spacing-to-toggle-button: 6;
}

.geo-editable-input__popup--normal {
  --spacing-to-toggle-button: 11;
}

@mixin _geo-feedback-box-content--variant (
  $text-color,
  $tint-color
) {
  background: $tint-color;
  color: $text-color;

  .geo-feedback-box-content__icon,
  .geo-feedback-box-content__close-icon:hover {
    color: brighten($tint-color, -40);
  }

  a {
    color: brighten($tint-color, -40);

    &:hover {
      background: brighten($tint-color, -10);
    }
  }
}

.geo-feedback-box {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  font-family: $font-family-text;
  font-size: $font-size-regular;
  justify-content: center;
  margin-bottom: 20px;
  min-height: 2.5em;
}

.geo-feedback-box--floating {
  bottom: 20px;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
  z-index: $z-index-sticky;
}

.geo-feedback-box-content--info {
  @include _geo-feedback-box-content--variant(
    $color-white,
    $color-blue-light
  );
}

.geo-feedback-box-content--success {
  @include _geo-feedback-box-content--variant(
    $color-white,
    $color-green
  );
}

.geo-feedback-box-content--warning {
  @include _geo-feedback-box-content--variant(
    $color-white,
    $color-yellow
  );
}

.geo-feedback-box-content--error {
  @include _geo-feedback-box-content--variant(
    $color-white,
    $color-red
  );
}

.geo-feedback-box-content--progress {
  background: $color-blue-dark;
  color: $color-white;

  .geo-feedback-box-content__icon,
  .geo-feedback-box-content__close-icon:hover {
    color: $color-link;
  }

  a {
    color: $color-blue-light;

    &:hover {
      background: brighten($color-blue-dark, -10);
    }
  }
}

.geo-feedback-box-content {
  align-items: center;
  border-radius: 3px;
  box-shadow: $box-shadow-regular;
  display: inline-flex;
  flex-direction: row;
  max-width: 50vw;
  padding: 7px 0 8px 10px;
  position: relative;
}

.geo-feedback-box-content__icon {
  margin-right: 15px;
}

.geo-feedback-box-content__body {
  margin-right: 10px;
}

.geo-feedback-box-content__actions {
  flex-shrink: 0;
  margin-right: 5px;
  text-transform: uppercase;

  a {
    border-radius: 3px;
    cursor: pointer;
    font-family: $font-family-heading;
    padding: 2px 5px 3px;
  }
}

.geo-feedback-box-content__close-icon {
  cursor: pointer;
  margin: 0 10px 0 5px;
}

@mixin geo-file-upload--focused {
  background: rgba($color-blue, .1);
  border-color: $color-blue;
}

@mixin geo-file-upload-show-focused-icon {
  .geo-file-upload__upload-icon {
    display: none;
  }

  .geo-file-upload__upload-icon--focused {
    display: block;
  }
}

.geo-file-upload {
  align-items: center;
  background: $color-white-dark;
  border: 1px dashed $color-grey;
  border-radius: $border-radius-default;
  color: $color-grey-light;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: $font-family-text;
  padding: 20px;
  position: relative;

  &:hover {
    @include geo-file-upload--focused;
    @include geo-file-upload-show-focused-icon;
  }
}

.geo-file-upload--focused {
  @include geo-file-upload--focused;
  @include geo-file-upload-show-focused-icon;
}

.geo-file-upload--success {
  background: rgba($color-green-light, .1);
  border-color: $color-green-light;

  &.geo-file-upload--focused {
    @include geo-file-upload--focused;
    @include geo-file-upload-show-focused-icon;
  }
}

.geo-file-upload--error {
  background: rgba($color-red, .1);
  border-color: $color-red;

  &.geo-file-upload--focused {
    @include geo-file-upload--focused;
    @include geo-file-upload-show-focused-icon;
  }
}

.geo-file-upload--warning {
  background: rgba($color-yellow, .1);
  border-color: $color-yellow;

  &.geo-file-upload--focused {
    @include geo-file-upload--focused;
    @include geo-file-upload-show-focused-icon;
  }
}

.geo-file-upload--loading {
  cursor: progress;

  &:hover {
    background: $color-white-dark;
    border-color: $color-grey;
  }
}

.geo-file-upload__loading-indicator {
  font-size: $display-medium;
  height: 1.125em;
  margin-bottom: $space-small;
  width: 1.125em;
}

.geo-file-upload__upload-icon {
  font-size: $display-medium;
  margin-bottom: $space-small;
}

.geo-file-upload__upload-icon--success {
  color: $color-green-light;
}

.geo-file-upload__upload-icon--error {
  color: $color-red;
}

.geo-file-upload__upload-icon--warning {
  color: $color-yellow;
}

.geo-file-upload__upload-icon--focused {
  color: $color-blue;
  display: none;
}

.geo-file-upload__title {
  @include font($body);
}

.geo-file-upload__help {
  @include font($body);

  color: $color-grey-light;
  margin-top: 10px;
  text-align: center;
}

.geo-file-upload__help--error,
.geo-file-upload__help--warning {
  font-style: italic;
}

.geo-file-upload__input {
  display: none;
}

.highlighted-string__container {
  align-items: center;
  display: inline;
}

.highlighted-string--normal {
  display: inline;
}

.highlighted-string--highlighted {
  background: $color-yellow-highlight;
  display: inline;
  font-weight: $font-weight-bold;
}

.geo-horizontal-layout {
  display: flex;
  flex-direction: row;
}

.geo-input-label {
  @include font($label);
  margin-bottom: $space-small;
}

.geo-input-message {
  @include font($body-small);
  color: $color-grey-light;
  margin-top: $space-x-small;
}

.geo-input-message--error {
  color: $color-red;
}

.geo-input-message--success {
  color: $color-green;
}

.geo-input-prefix {
  @include font($body);

  $border-size: 1px;

  background-color: $color-white-darker;
  border-right: $border-size solid $color-grey;
  border-radius: $border-radius-default 0 0 $border-radius-default;
  box-sizing: border-box;
  color: $color-grey-darker;
  height: $space-x-large - 2 * $border-size;
  margin-left: -$space-small + $border-size;
  padding: $space-small;
}

.geo-input-suffix {
  @include font($body);

  $border-size: 1px;

  background-color: $color-white-darker;
  border-radius: 0 $border-radius-default $border-radius-default 0;
  border-left: $border-size solid $color-grey;
  box-sizing: border-box;
  color: $color-grey-darker;
  height: $space-x-large - 2 * $border-size;
  margin-right: -$space-small + $border-size;
  padding: $space-small;
}

.geo-input {
  $border-size: 1px;

  width: 100%;

  .geo-input__input-wrapper {
    display: flex;
    position: relative;
  }

  .geo-input__input-field {
    align-items: center;
    display: flex;
    width: 100%;
  }

  .geo-input__input {
    @include font($body);

    background: transparent;
    border: none;
    box-sizing: border-box;
    flex-grow: 1;
    height: $space-x-large;
    outline: none;
    padding: $space-small;
    width: 100%;
    z-index: 1;

    &:focus,
    &[focus] {
      & ~ .geo-input__input-outline {
        border: $border-size solid $color-blue;
        box-shadow: $box-shadow-focus;
      }
    }

    &:invalid,
    &[invalid] {
      & ~ .geo-input__input-outline {
        border: $border-size solid $color-red;
        box-shadow: $box-shadow-focus-error;
      }
    }

    &::placeholder {
      color: $color-grey-light;
    }
  }

  .geo-input__input-outline {
    border: $border-size solid $color-grey;
    border-radius: $border-radius-default;
    bottom: 0;
    flex-grow: 0;
    left: 0;
    outline: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
  }

  .geo-input__accessory-items {
    align-items: center;
    color: $color-grey-light;
    display: flex;
    flex-direction: row;
    font-size: $font-size-small;
    z-index: 1;
  }

  .geo-input__accessory-items--leading {
    .geo-input__accessory-items-item {
      margin-left: $space-small;
    }
  }

  .geo-input__accessory-items--trailing {
    .geo-input__accessory-items-item {
      margin-right: $space-small;
    }
  }

  .geo-input__accessory-items-item {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
  }

  .geo-input__delete-icon--visible {
    color: $color-red;
    cursor: pointer;
  }
  
  .geo-input__delete-icon--hidden {
    visibility: hidden;
  }

  &--success {
    .geo-input__input {
      &, &:focus, &[focus] {
        & ~ .geo-input__input-outline {
          border: $border-size solid $color-green;
        }
      }

      &:focus, &[focus] {
        & ~ .geo-input__input-outline {
          box-shadow: $box-shadow-focus-success;
        }
      }
    }
  }

  &--error {
    .geo-input__input {
      &, &:focus, &[focus] {
        & ~ .geo-input__input-outline {
          border: $border-size solid $color-red;
        }
      }

      &:focus, &[focus] {
        & ~ .geo-input__input-outline {
          box-shadow: $box-shadow-focus-error;
        }
      }
    }
  }

  &--disabled {
    cursor: not-allowed;

    .geo-input__input {
      cursor: not-allowed;

      &, &:focus, &[focus] {
        color: $color-grey-light;
      }

      &, &:focus, &[focus] {
        & ~ .geo-input__input-outline {
          background-color: $color-white-dark;
          border: $border-size solid $color-grey;
        }
      }
    }
  }
}

.geo-list-actionable-item {
  display: flex;
  padding: 15px 10px;

  &:not(:last-child) {
    border-bottom: 1px solid $color-grey;
  }


  .geo-list-actionable-item__leading-icon,
  .geo-list-actionable-item__trailing-accessory-items {
    color: $color-grey-light;
    height: $size-medium;
    width: $size-medium;
  }

  .geo-list-actionable-item__leading-icon {
    margin-right: 10px;
  }

  .geo-list-actionable-item__container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .geo-list-actionable-item__title-container {
    display: flex;
    justify-content: space-between;
  }

  .geo-list-actionable-item__title {
    @include font('heading');
    color: $color-grey-darker;
  }

  .geo-list-actionable-item__trailing-accessory-items {
    align-items: center;
    cursor: pointer;
    display: flex;
    margin-left: 10px;
  }

  .geo-list-actionable-item__body {
    @include font('body');
    color: $color-grey-darker;
    margin: 10px 0;
  }

  .geo-list-actionable-item__actions {
    display: flex;
    margin-top: 10px;
  }
}

.geo-list-actionable-item--active {
  background-color: rgba($color-blue-light, .1)
}

.geo-list-clear-item {
  align-items: center;
  border-radius: $border-radius-default;
  color: $color-grey-light;
  cursor: default;
  display: flex;
  font-family: $font-family-text;
  font-weight: $font-weight-regular;
  justify-content: center;
  margin: 20px 10px;
  min-height: 20px;
}

.geo-list-footer-button {
  align-items: center;
  background: $color-white;
  border-top: 1px solid $color-grey;
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  padding: 0 10px;
}

.geo-list-group {
  background: $color-white;

  & + & {
    border-top: 1px solid $color-grey;
    margin-top: $space-x-small;
  }
}

.geo-list-group-header {
  align-items: center;
  background: $color-white;
  border-radius: $border-radius-default;
  color: $color-grey-dark;
  cursor: default;
  display: flex;
  flex-direction: row;
  font-family: $font-family-heading;
  font-size: $font-size-regular;
  font-weight: $font-weight-semi-bold;
  height: $space-large;
  justify-content: space-between;
  line-height: $line-height-base;
  margin: $space-x-small;
  padding: 0 $space-x-small;
  white-space: nowrap;
}

.geo-list-group-header__icon-and-label {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.geo-list-group-header__icon-container {
  margin-right: $space-small;
}

.geo-list-group-header__trailing-accessory-items {
  color: $color-grey-light;
  margin-left: $space-small;
}

.geo-list-group__content {
  margin-left: $space-small;
}

.geo-list-item {
  background: $color-white;
  border-radius: $border-radius-default;
  color: $color-grey-dark;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: $font-family-text;
  font-size: $font-size-regular;
  justify-content: center;
  line-height: $line-height-base;
  margin: 5px;
  min-height: 30px;
  overflow: hidden;
  padding: 0 7px 0 5px;

  &:hover {
    background: $color-white-dark;
  }
}

.geo-list-item--disabled {
  color: $color-grey-light;
  cursor: not-allowed;

  &:hover {
    background: $color-white;
  }
}

.geo-list-item__label-and-accessory-container {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  white-space: nowrap;
  width: 100%;
}

.geo-list-item__description {
  @include font($body-small);

  color: $color-grey-light;
  margin-top: $space-x-small;
}

.geo-list-item__icon-and-label {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.geo-list-item__icon-container {
  margin-right: 10px;
}

.geo-list-item__trailing-accessory-items {
  align-items: center;
  color: $color-grey-light;
  display: flex;
  margin-left: 10px;
}

.geo-list-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.geo-list-item__icon-container {
  width: $space-base;
}

.geo-list-item__description--spaced {
  margin-left: $space-large;
}
.geo-markdown-content {
  strong {
    &, span {
      font-weight: bold;
    }
  }

  em {
    &, span {
      font-style: italic;
    }
  }

  .geo-markdown-content-node-link__link {
    cursor: pointer;
  }
}

@keyframes marquee-animation {
  0% {
    transform: translateX(0);
  }

  65% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.geo-marquee {
  cursor: pointer;
  display: flex;
  overflow: hidden;
  width: 100%;
}

.geo-marquee__text-content {
  padding-right: $space-small;
  white-space: nowrap;
}

.geo-modal {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: $z-index-modal;

  .geo-modal__backdrop {
    bottom: 0;
    background: $color-grey-backdrop;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
  }

  .geo-modal__content {
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 1;
  }

  .geo-modal__content-body {
    padding: $space-base;
  }
}

.geo-notification-bar {
  align-items: center;
  background: $color-green-notification;
  display: flex;
  height: 45px;
  justify-content: space-between;
  padding: 0 25px;
  width: 100%;

  .geo-notification-bar__message-body {
    align-items: center;
    display: flex;
    width: 100%;
  }

  .geo-notification-bar__close-icon,
  .geo-notification-bar__icon {
    font-size: 18px;
    color: $color_white;
  }

  .geo-notification-bar__message-text {
    @include font($body);
    color: $color-black;
    margin: 0 15px;
    user-select: none;
  }

  .geo-notification-bar__close-icon {
    cursor: pointer;
    margin-left: 15px;
  }
}

.geo-pill {
  @include font($body);
  align-items: center;
  border-radius: 50vh;
  border: 1px solid $color-grey;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  font-family: $font-family-text;
  padding: 0 $space-small;
  user-select: none;
}

.geo-pill--default,
.geo-pill--light {
  background: $color-white;
  font-size: $font-size-xxsmall;
  font-weight: $font-weight-bold;
  height: $space-base;
  text-transform: uppercase;
}

.geo-pill--dark {
  background: $color-white-dark;
  color: $color-grey-darker;
  min-height: $space-large;
}

.geo-pill--opaque {
  background: $color-yellow-light;
  border: none;
  color: $color-grey-darker;
  font-size: $font-size-small;
  height: $space-large;
}

.geo-pill--outline {
  background: $color-white;
  border: 1px solid $color-yellow-light;
  color: $color-grey-darker;
  font-size: $font-size-small;
  height: $space-large;
}

.geo-scrollable-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 150px;
  overflow: hidden;
}

.geo-scrollable-container__body {
  flex-grow: 1;
  flex-shrink: 1;
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}

.geo-segmented-control-item,
.geo-segmented-control-item--outline {
  @include font($highlight-small);

  align-items: center;
  border-radius: $border-radius-default;
  color: $color-grey-darker;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  padding: 0 10px;
  justify-content: center;
  user-select: none;
  white-space: nowrap;

  & > *:first-child:not(:last-child) {
    margin-right: 5px;
  }
}

.geo-segmented-control-item .geo-trimmed-content {
  justify-content: center;
}

.geo-segmented-control-item {
  height: 24px;

  &:hover {
    background: $color-white-dark;
  }
}

.geo-segmented-control-item--info.geo-segmented-control-item--active {
  &, &:hover {
    background: $color-blue;
    color: $color-white;
  }
}

.geo-segmented-control-item--success.geo-segmented-control-item--active {
  &, &:hover {
    background: $color-green;
    color: $color-white;
  }
}

.geo-segmented-control-item--warning.geo-segmented-control-item--active {
  &, &:hover {
    background: $color-yellow;
    color: $color-white;
  }
}

.geo-segmented-control-item--danger.geo-segmented-control-item--active {
  &, &:hover {
    background: $color-red;
    color: $color-white;
  }
}

.geo-segmented-control-item--disabled,
.geo-segmented-control-item--disabled.geo-segmented-control-item--active {
  &, &:hover {
    background: $color-grey;
    color: $color-grey-darker;
    cursor: not-allowed;
  }
}

.geo-segmented-control-item--outline {
  background: $color-white;
  border: 1px solid $color-grey;
  font-weight: $font-weight-bold;
  height: 30px;

}

.geo-segmented-control-item--info.geo-segmented-control-item--outline {
  &:hover {
    color: $color-blue;
  }
}

.geo-segmented-control-item--info.geo-segmented-control-item--outline.geo-segmented-control-item--active {
  &, &:hover {
    border-color: $color-blue;
    color: $color-blue;
  }
}

.geo-segmented-control-item--success.geo-segmented-control-item--outline {
  &:hover {
    color: $color-green;
  }
}

.geo-segmented-control-item--success.geo-segmented-control-item--outline.geo-segmented-control-item--active {
  &, &:hover {
    border-color: $color-green;
    color: $color-green;
  }
}

.geo-segmented-control-item--warning.geo-segmented-control-item--outline {
  &:hover {
    color: $color-yellow;
  }
}

.geo-segmented-control-item--warning.geo-segmented-control-item--outline.geo-segmented-control-item--active {
  &, &:hover {
    border-color: $color-yellow;
    color: $color-yellow;
  }
}

.geo-segmented-control-item--danger.geo-segmented-control-item--outline {
  &:hover {
    color: $color-red;
  }
}

.geo-segmented-control-item--danger.geo-segmented-control-item--outline.geo-segmented-control-item--active {
  &, &:hover {
    border-color: $color-red;
    color: $color-red;
  }
}

.geo-segmented-control-item--outline.geo-segmented-control-item--disabled,
.geo-segmented-control-item--outline.geo-segmented-control-item--disabled.geo-segmented-control-item--active {
  &, &:hover {
    background: $color-grey;
    border-color: transparent;
    color: $color-grey-darker;
    cursor: not-allowed;
  }
}

.geo-segmented-control,
.geo-segmented-control--outline {
  align-items: center;
  background: $color-white;
  border: 1px solid $color-grey;
  border-radius: $border-radius-default;
  display: flex;
  flex-direction: row;
  height: 30px;
  width: 100%;

  .geo-segmented-control-item,
  .geo-segmented-control-item--outline {
    width: 100%;
  }
}

.geo-segmented-control {
  padding: 0 3px;

  .geo-segmented-control-item {
    &:not(:last-child) {
      margin-right: 3px;
    }
  }
}

.geo-segmented-control--outline {
  .geo-segmented-control-item--outline {
    background: transparent;
    margin: -1px -1px -1px 0;
    z-index: 2;

    &:first-child {
      margin-left: -1px;
    }

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &.geo-segmented-control-item--outline.geo-segmented-control-item--disabled {
      background: $color-grey;
      z-index: 1;
    }

    // We don't to overlap the right border of the active item with the left
    // border of a non-active one
    & + .geo-segmented-control-item--outline:not(
      .geo-segmented-control-item--outline.geo-segmented-control-item--active
    ) {
      border-left-color: $color-grey;
    }

    // We don't want left border on the button after the currently active one
    &.geo-segmented-control-item--outline.geo-segmented-control-item--active +
    .geo-segmented-control-item--outline {
      border-left-color: transparent;
    }
  }
}

.geo-multi-select {
  flex-grow: 1;

  .geo-multi-select__pills-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -$space-x-small;
    max-height: 128px;
    overflow-y: auto;
  }

  .geo-multi-select__pill {
    height: 28px;
    margin: 0 $space-x-small $space-x-small 0;

    &:last-child {
      margin-right: 0
    }
  }

  .geo-multi-select__pill-remove {
    color: $color-grey-light;
    margin-left: $space-x-small;

    &:hover {
      color: $color-red;
    }
  }
}

.geo-multi-select__popup {
  .geo-multi-select__label-group,
  .geo-multi-select__label {
    align-items: center;
    display: flex;
    font-weight: $font-weight-regular;
  }

  .geo-multi-select__label-group {
    font-weight: $font-weight-semi-bold;
  }

  .geo-multi-select_input {
    margin-left: $space-small;
  }
}

.geo-multi-select {
  .geo-select-toggle-button {
    box-sizing: border-box;
    height: auto;
    min-height: $space-x-large;
    padding: $space-x-small $space-small;
    width: 100%;
  }
}

.geo-select-base {
  .geo-select-toggle-button__toggle-icon {
    transition: transform $duration-quickly $easing-base;
  }

  &.geo-dropdown--is-open {
    .geo-select-toggle-button__toggle-icon {
      transform: rotateZ(-180deg);
    }
  }
}

.geo-select-base__options-container {
  flex-grow: 0;
  flex-shrink: 1;
  overflow-y: auto;
}

.geo-select-base__popup {
  &.geo-dropdown__popup--is-open {
    display: flex;
    flex-direction: column;
  }

  .geo-trimmed-content {
    width: calc(100% - 10px - 0.875em);
  }

  .geo-list-group-header__label,
  .geo-list-item__icon-and-label,
  .geo-list-item__label,
  .geo-list-group-header__icon-and-label{
    width: 100%;

    .geo-trimmed-content {
      width: 100%;
    }
  }

  .geo-scrollable-container {
    flex-grow: 1;
    flex-shrink: 1;
  }

  .geo-list-group {
    &:not(:first-child) {
      border-top: 1px solid $color-grey;
      margin-top: $space-small;
    }
  }
}

.geo-select-base__popup--disabled {
  .geo-marquee {
    cursor: not-allowed;
  }
}

@mixin geo-select-toggle-button-inputAccessory-common($border-size) {
  background: $color-white-darker;
  border-top: none;
  border-bottom: none;
  box-sizing: border-box;
  color: $color-grey-darker;
  height: $space-x-large - 2 * $border-size;
  padding: $space-small;
  width: auto;

  &:hover, &:focus {
    color: $color-dark;

    .geo-select-toggle-button__toggle-icon {
      color: $color-dark;
    }
  }

  &.geo-select-toggle-button--disabled {
    background: $color-white-darker;
    color: $color-grey-darker;

    .geo-select-toggle-button__toggle-icon {
      color: $color-grey-light;
    }

    &:hover, &:focus {
      color: $color-grey-darker;
    }
  }
}

.geo-select-toggle-button {
  @include font($body);

  $border-size: 1px;

  cursor: pointer;
  justify-content: space-between;
  user-select: none;

  align-items: center;
  background: $color-white;
  border: 1px solid $color-grey;
  border-radius: $border-radius-default;
  display: flex;
  height: $space-x-large;
  padding: 0 $space-small;
  width: 200px;

  &.geo-select-toggle-button--empty {
    color: $color-grey-light;
    font-style: italic;
  }

  &.geo-select-toggle-button--disabled {
    background: $color-white-dark;
    color: $color-grey-light;
    cursor: not-allowed;

    &:hover, &:focus {
      border-color: $color-grey;
      .geo-select-toggle-button__toggle-icon {
        color: $color-grey-light;
      }
    }
  }

  &:hover, &:focus {
    border-color: $color-blue;

    .geo-select-toggle-button__toggle-icon {
      color: $color-blue;
    }

    .geo-select-toggle-button__delete-icon {
      visibility: visible;
    }
  }

  &.geo-select-toggle-button--inputAccessorySuffix {
    @include geo-select-toggle-button-inputAccessory-common($border-size);

    border-right: none;
    border-left: $border-size solid $color-grey;
    border-radius: 0 $border-radius-default $border-radius-default 0;
    margin-right: -$space-small + $border-size;
  }

  &.geo-select-toggle-button--inputAccessoryPrefix {
    @include geo-select-toggle-button-inputAccessory-common($border-size);

    border-left: none;
    border-right: $border-size solid $color-grey;
    border-radius: $border-radius-default 0 0 $border-radius-default;
    margin-left: -$space-small + $border-size;
  }
}

.geo-select-toggle-button__delete-icon {
  color: $color-red;
  font-size: $font-size-small;
  margin-left: auto;
}

.geo-select-toggle-button__toggle-icon {
  margin-left: $space-small;
}


.geo-sidebar-layout {
  background-color: $color-white-dark;
  border-right: 1px solid $color-grey;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  padding: $space-base;
}

.geo-switch {
  @include font($body);

  align-items: center;
  cursor: pointer;
  display: flex;

  &.geo-switch--disabled {
    cursor: not-allowed;

    .geo-switch__background {
      background: $color-white-disabled;
    }

    &.geo-switch--checked {
      .geo-switch__background {
        background: $color-blue-light;
      }
    }
  }

  &.geo-switch--checked {
    .geo-switch__background {
      background: $color-blue;
    }

    .geo-switch__handle {
      transform: translateX(8px);
    }
  }

  .geo-switch__input {
    display: none;
  }

  .geo-switch__background {
    background: $color-grey-light;
    border-radius: calc($space-small / 2);
    height: $space-small;
    margin-right: $space-small;
    position: relative;
    transition: background-color $duration-noticeable $easing-base;
    width: 18px;
  }

  .geo-switch__handle {
    $size: 6px;

    background: $color-white;
    border-radius: calc($size / 2);
    height: $size;
    left: calc(($space-small - $size) / 2);
    position: absolute;
    top: calc(($space-small - $size) / 2);
    transition: transform $duration-noticeable $easing-base;
    width: $size;
  }
}

@mixin geo-tab-bar-item-common {
  $border-height: 4px;

  align-items: center;
  border-bottom: $border-height solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: $border-height $space-small 0;

  &:not(:last-of-type) {
    margin-right: $space-large;
  }

  & > *:not(:first-child) {
    margin-left: $space-small;
  }
}

.geo-tab-bar-item-default {
  @include font($heading-light);
  @include geo-tab-bar-item-common;

  background-color: $color-blue-dark;
  color: $color-white;
  height: 42px;

  &:hover, &[hover] {
    border-bottom-color: $color-blue-light;
    color: $color-white;
  }
}

.geo-tab-bar-item-default--active {
  border-bottom-color: $color-yellow;

  &:hover, &[hover] {
    border-bottom-color: $color-blue-light;
    color: $color-white;
  }
}

.geo-tab-bar-item-modal {
  @include font($heading-light);
  @include geo-tab-bar-item-common;

  background-color: $color-white-dark;
  height: 32px;

  &:hover, &[hover] {
    border-bottom-color: $color-grey;
  }
}

.geo-tab-bar-item-modal--active {
  @include font($heading);
  border-bottom-color: $color-blue;

  &:hover, &[hover] {
    border-bottom-color: $color-grey;
  }
}

@mixin geo-tab-bar-common {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 $space-small;
}

.geo-tab-bar-default {
  @include geo-tab-bar-common;

  background-color: $color-blue-dark;
  height: 50px;
}

.geo-tab-bar-modal {
  @include geo-tab-bar-common;

  background-color: $color-white-dark;
  height: 40px;
}

$geo-table-border-color: $color-white-darker;
$geo-table-shadow-background-dark: rgba(205, 205, 205, .7);
$geo-table-shadow-background-transparent: rgba(255, 255, 255, 0);
$geo-table-shadow-size: $space-small;

@mixin geo-table-make-row ($background-color) {
  background: $background-color;
  display: flex;
  flex-direction: row;
  height: $space-large;

  &:first-child {
    > * {
      border-top: 0;
    }
  }
}

@mixin geo-table-make-cell ($background-color) {
  align-items: center;
  border-left: 1px solid $geo-table-border-color;
  border-top: 1px solid $geo-table-border-color;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  padding: 0 $space-small;

  &:first-child {
    border-left: 0;
  }
}
.geo-table-body-row-cell {
  @include geo-table-make-cell($color-white);
  @include font($table-value);

  white-space: nowrap;
}

.geo-table-body-row--default,
.geo-table-body-row--highlighted,
.geo-table-body-row--active,
.geo-table-body-row--highlighted-active {
  @include geo-table-make-row($color-white);

  height: $space-large;
}

.geo-table-body-row--default:hover {
  background: rgba($color-blue-light, .1);
}

.geo-table-body-row--highlighted {
  background: rgba($color-yellow-light, .2);

  &:hover {
    background: rgba($color-yellow-light, .4);
  }
}

.geo-table-body-row--highlighted-active {
  background: rgba($color-yellow-light, .6);

  &:hover {
    background: rgba($color-yellow-light, .4);
  }
}

.geo-table-body-row--active {
  background: rgba($color-blue-light, .2);

  &:hover {
    background: rgba($color-blue-light, .1);
  }
}

@mixin geo-table-header-row-cell-make-common {
  @include geo-table-make-cell($color-white);
  @include font($table-title);

  justify-content: space-between;
  white-space: nowrap;

  &:hover {
    .geo-table-sort {
      visibility: visible;
    }
  }
}

.geo-table-header-row-cell--main,
.geo-table-header-row-cell--single {
  @include geo-table-header-row-cell-make-common;

  position: relative;
}

.geo-table-header-row-cell--aux {
  @include geo-table-header-row-cell-make-common;
  @include font($heading-xsmall);
}

.geo-table-header-row-cell--multiLine {
  @include geo-table-header-row-cell-make-common;

  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: $space-x-small $space-small;
  position: relative;
}

.geo-table-header-row--main {
  @include geo-table-make-row($color-white-darker);

  color: $color-grey-darker;
  position: relative;
}

.geo-table-header-row--aux {
  @include geo-table-make-row($color-white-dark);

  color: $color-grey-darker;
}

.geo-table-header-row--single {
  @include geo-table-make-row($color-white-dark);

  color: $color-grey-darker;
  position: relative;
}

.geo-table-header-row--multiLine {
  @include geo-table-make-row($color-white-dark);

  color: $color-grey-darker;
  height: auto;
  position: relative;
}

@mixin geo-table-pagination-make-action {
  box-sizing: content-box;
  color: $color-grey-light;
  cursor: pointer;
  flex-grow: 0;
  height: $space-small;
  width: $space-small;

  &:hover {
    color: $color-link;
  }
}

.geo-table-pagination {
  align-items: center;
  color: $color-grey-dark;
  display: flex;
  flex: 1 0 auto;
  flex-direction: row;
  height: $space-large;
  justify-content: center;

  .geo-table-pagination__current-range {
    @include font($table-value);

    padding: 0 $space-base;
  }

  .geo-table-pagination__action-first {
    &, &--disabled {
      @include geo-table-pagination-make-action;

      padding: 0 0 0 $space-base;
    }
  }

  .geo-table-pagination__action-prev {
    &, &--disabled {
      @include geo-table-pagination-make-action;

      padding: 0 0 0 $space-base;
    }
  }

  .geo-table-pagination__action-next {
    &, &--disabled {
      @include geo-table-pagination-make-action;

      padding: 0 $space-base 0 0;
    }
  }

  .geo-table-pagination__action-last {
    &, &--disabled {
      @include geo-table-pagination-make-action;

      padding: 0 $space-base 0 0;
    }
  }
}

.geo-table-pagination--aux {
  @include geo-table-make-row($color-white-dark);

  color: $color-grey-darker;
}

.geo-table-pagination--single {
  @include geo-table-make-row($color-white-dark);

  color: $color-grey-darker;
  position: relative;
}

.geo-table-sort {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: $space-small;

  .geo-table-sort__button {
    color: $color-grey-light;
    cursor: pointer;

    &:hover {
      color: $color-link;
    }
  }

  .geo-table-sort__button--active {
    color: $color-link;
  }

  .geo-table-sort__button--asc {
    margin-bottom: -1px;
  }

  .geo-table-sort__button--desc {
    margin-top: -1px;
  }
}

.geo-table {
  @include font($table-value);

  background: $color-white;
  border: 1px solid $geo-table-border-color;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .geo-table__container {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
  }

  .geo-table__container--requiring-horizontal-scroll {
    overflow-x: scroll;
  }

  .geo-table__header {
    border-bottom: 1px solid $geo-table-border-color;
    flex: 0 0 auto;
    left: 0; // This will always be 0, we use transform-translate to make header sticky
    position: absolute;
    top: 0;  // This will always be 0, we use transform-translate to make header sticky
    z-index: 1;
  }

  .geo-table__header--empty-table {
    border-bottom: 1px solid $geo-table-border-color;
    position: initial;
  }

  .geo-table__body {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
  }

  .geo-table__body-content {
    overflow: visible;
  }

  .geo-table__footer {
    align-items: center;
    background: $color-white-dark;
    border-top: 1px solid $geo-table-border-color;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
  }

  // > Shadows

  .geo-table__shadow--vertical-top {
    background: linear-gradient(
      180deg,
      $geo-table-shadow-background-dark 0%,
      $geo-table-shadow-background-transparent 100%
    );
    height: $geo-table-shadow-size;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .geo-table__shadow--vertical-bottom {
    background: linear-gradient(
      0deg,
      $geo-table-shadow-background-dark 0%,
      $geo-table-shadow-background-transparent 100%
    );
    bottom: 0;
    height: $geo-table-shadow-size;
    position: absolute;
    width: 100%;
  }

  .geo-table__shadow--horizontal-left {
    background: linear-gradient(
      90deg,
      $geo-table-shadow-background-dark 0%,
      $geo-table-shadow-background-transparent 100%
    );
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: $geo-table-shadow-size;
    z-index: 2;
  }

  .geo-table__shadow--horizontal-right {
    background: linear-gradient(
      -90deg,
      $geo-table-shadow-background-dark 0%,
      $geo-table-shadow-background-transparent 100%
    );
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: $geo-table-shadow-size;
    z-index: 2;
  }
}

.geo-tooltip,
.geo-tooltip-static {
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: $z-index-tooltip;
}

.geo-tooltip__content--top,
.geo-tooltip__content--bottom {
  &.geo-tooltip__content--start .geo-tooltip__arrow {
    left: 0;
  }

  &.geo-tooltip__content--end .geo-tooltip__arrow {
    left: 100%;
    transform: translateX(-200%);
  }

  &.geo-tooltip__content--middle .geo-tooltip__arrow {
    left: 50%;
    transform: translateX(-100%);
  }
}

.geo-tooltip__content--leading,
.geo-tooltip__content--trailing {
  &.geo-tooltip__content--start .geo-tooltip__arrow {
    top: 0;
  }

  &.geo-tooltip__content--end .geo-tooltip__arrow {
    top: 100%;
    transform: translateY(-200%);
  }

  &.geo-tooltip__content--middle .geo-tooltip__arrow {
    top: 50%;
    transform: translateY(-100%);
  }
}

.geo-tooltip__content {
  $popper-background-color: $color-dark-overlay !default;
  $popper-tooltip-arrow-size: 5px;
  $popper-tooltip-arrow-offset: 2px;

  // Use this variable to customize the space between trigger target and tooltip
  --spacing-to-trigger-target: #{$popper-tooltip-arrow-size+$popper-tooltip-arrow-offset};

  // You can use these variables to consider available space depending on the
  // position of the tooltip. They are automatically set whenever tooltip is
  // positioned:
  //
  // --available-width
  // --available-height

  // These styles are directly taken from vue-directive-tooltip so Chart
  // tooltips look like regular tooltips.

  @include font($body);

  background-color: $popper-background-color;
  border-radius: 3px;
  box-sizing: border-box;
  color: $color-white;
  max-width: 320px;
  padding: 6px 10px;
  pointer-events: auto;
  position: relative;

  .geo-tooltip__arrow {
    border-style: solid;
    content: '';
    height: 0;
    margin: $popper-tooltip-arrow-size;
    position: absolute;
    width: 0;
  }

  &--top {
    transform: translateY(-100%);

    .geo-tooltip__arrow {
      border-bottom-color: transparent !important;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: $popper-background-color;
      border-width: $popper-tooltip-arrow-size $popper-tooltip-arrow-size 0 $popper-tooltip-arrow-size;
      bottom: -$popper-tooltip-arrow-size;
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &--bottom .geo-tooltip__arrow {
    border-bottom-color: $popper-background-color;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    border-width: 0 $popper-tooltip-arrow-size $popper-tooltip-arrow-size $popper-tooltip-arrow-size;
    margin-top: 0;
    margin-bottom: 0;
    top: -$popper-tooltip-arrow-size;
  }

  &--leading {
    transform: translateX(-100%);

    .geo-tooltip__arrow {
      border-bottom-color: transparent !important;
      border-left-color: $popper-background-color;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      border-width: $popper-tooltip-arrow-size 0 $popper-tooltip-arrow-size $popper-tooltip-arrow-size;
      margin-left: 0;
      margin-right: 0;
      right: -$popper-tooltip-arrow-size;
    }
  }

  &--trailing .geo-tooltip__arrow {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-right-color: $popper-background-color;
    border-width: $popper-tooltip-arrow-size $popper-tooltip-arrow-size $popper-tooltip-arrow-size 0;
    left: -$popper-tooltip-arrow-size;
    margin-left: 0;
    margin-right: 0;
  }
}

.geo-tree-item {
  cursor: pointer;
}

.geo-tree-item__label {
  cursor: pointer;
  .highlighted-string__container {
    white-space: normal;
  }
}

.geo-tree-item__list {
  list-style: none;
}

.geo-tree-item .geo-list-item__icon-container {
  text-align: center;
  width: 14px;
}

.geo-tree-item .geo-list-item__icon {
  color: $color-grey-backdrop;
  width: 5px;
}

.geo-tree-item__total-items {
  @include font($body-small);
  color: $color-grey-light;
  font-style: italic;
}

.geo-tree-item .geo-list-item__icon {
  transition: transform 0.25s;
}

.geo-tree-item--rotated-icon .geo-list-item__icon {
  transform: rotate(90deg);
}

.geo-tree-item--single {
  margin-left: $space-small;
}

.geo-tree__list {
  list-style: none;
}

.geo-tree__no-results-found {
  @include font($body);
  align-items: center;
  color: $color-grey-light;
  display: flex;
  justify-content: center;
  margin: $space-base $space-small;
  min-height: 20px;
}

.geo-tree .geo-list-footer-button{
  background: transparent;
}

.geo-trimmed-content {
  display: flex;
  flex-direction: row;
  width: 100%;

  .geo-trimmed-content__content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


.geo-value {
  border-radius: $border-radius-default;
}

.geo-value__column {
  float: left;
}

.geo-value--primary {
  .geo-value__value {
    @include font($display-medium);
    display: inline-block;
  }
  .geo-value__unit {
    @include font($body-small);
    display: inline-block;
  }

  .geo-value__description {
    @include font($body-small);
    margin-top: 3px;
  }
  &.geo-value--negative {
    .geo-value__value, .geo-value__unit {
      color: $color-red;
    }
  }
  &.geo-value--neutral {
    .geo-value__value, .geo-value__unit {
      color: $color-yellow;
    }
  }
  &.geo-value--positive {
    .geo-value__value, .geo-value__unit {
      color: $color-green;
    }
  }
}

.geo-value--secondary {
  padding: 0px 2px;

  .geo-value__column {
    margin: 0 5px;
  }

  .geo-value__row {
    display: inline-block;
  }
  .geo-value__value, .geo-value__unit, .geo-value__description {
    @include font($body-small);
    display: inline-block;
  }
  &.geo-value--negative {
    background-color: $color-red-readable-border;
  }
  &.geo-value--neutral {
    background-color: $color-yellow-readable-border;
  }
  &.geo-value--positive {
    background-color: $color-green-readable-border;
  }
}
.geo-vertical-layout {
  display: flex;
  flex-direction: column;
}

.geo-vertical-layout__body {
  padding: $space-base;

  & > .geo-scrollable-container__body {
    justify-content: center;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.geo-wizard-layout {
  height: 100%;
  width: 100%;
}

.geo-wizard-layout__content-container {
  width: 100%;
}

.geo-wizard-layout__header {
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-top: auto;
}

.geo-wizard-layout__footer {
  align-items: center;
  display: flex;
  flex-direction: row;

  border-top: 1px solid $color-grey;
  margin-top: auto;
  padding: 0 $space-base;
}

.geo-wizard-layout__footer--trailing {
  margin-left: auto;
}