// Sass variables: adapt them to your designs globally

// base size for text
$base-font             : 14 !default; // if "14" then 1em = 14px
// default line-height
$l-h                   : 1.5 !default;

$size-h1               : 36 !default;
$size-h2               : 28 !default;
$size-h3               : 20 !default;
$size-h4               : 18 !default;
$size-h5               : 17 !default;
$size-h6               : 16 !default;

// Use typo helpers on demand
$use-other-typo-helpers       : true !default;
$use-other-line-height-helpers: true !default;

$size-smallest         : 9 !default;
$size-smaller          : 10 !default;
$size-small            : 12 !default;
$size-big              : 16 !default;
$size-bigger           : 18 !default;
$size-biggest          : 20 !default;

// fonts
$font-family           : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default;
$font-family-monospace : SFMono-Regular,Consolas,"Liberation Mono","Menlo",monospace,monospace !default;
// explanation for double monospace http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/

// project colors
$pm-global-grey        : #262a33 !default;
$pm-global-altgrey     : #3c414e !default;
$bluish-grey           : #9799a6 !default;
$pm-global-light       : #f6f7fa !default;
$pm-global-border      : #dde6ec !default;
$pm-global-muted       : #eeeff3 !default;
$pm-global-info        : #008cff !default;
$pm-global-success     : #5db039 !default;
$pm-global-warning     : #ec5858 !default;
$pm-global-attention   : #eac819 !default;
$pm-blue               : #657ee4 !default;
$pm-blue-dark          : #526ee0 !default;
$pm-blue-light         : #788ee8 !default;
$pm-blue-gradient      : linear-gradient(130deg, #657ee4 -7%, #7351d1 64%, #7350d1 127%);

$white                 : #fff !default;
$black                 : #000 !default;

$pv-green              : #4da358 !default;
$pv-green-dark         : #3e8447 !default;
$pv-green-light        : #5fb364 !default;

// plans
$visionary             : #6ddcfb !default;
$plus                  : #c6e422 !default;
$professional          : #d4b46e !default;
$vpnbasic              : #f67f60 !default;
$vpnplus               : #9ccc23 !default;

// primary
$pm-primary            : $pm-blue !default;
$pm-primary-light      : $pm-blue-light !default;
$pm-primary-dark       : $pm-blue-dark !default;

// not approved colors
$pm-input-background   : #fcfdff !default;
$plan-logo-color       : #8ed60f !default;
$conversation-selected-bg: rgba($pm-blue, .5) !default;
$input-shadow-color    : rgba(0, 0, 0, 0.16) !default;
$autocomplete-bg-color-hover : #f4f4f4 !default;
$text-sub-header       : #767676 !default;

// needed for darkmode
$pm-secondary-grey     : #2e323d !default;
$pm-tertiary-grey      : #505560 !default; // border input

// needed globally
$calendar-selected-day-color: $pm-blue-light !default;
$calendar-today-color: $pm-primary-dark !default;

$navigation-hover-bg-color: rgba(white, .05) !default;

// colors
$color-links           : $pm-primary !default;
$color-hover           : $black !default;
$color-hr              : $pm-global-border !default;
$hr-height             : 1px !default;
$color-alert           : $pm-global-warning !default;
$color-bg-button       : $white !default;
$color-txt-button      : $black !default;

$global-border-radius  : 3px !default;

// inputs
$input-defaut-border   : $pm-global-border !default;

// main breakpoints
$breakpoint-large      : 1500 !default;
$breakpoint-medium-landscape : 1100 !default;
$breakpoint-medium     : 910 !default;
$breakpoint-small      : 680 !default;
$breakpoint-tiny       : 450 !default;

// RTL
$rtl-option            : false !default;
// RTL = Right To Left =>
// to adapt a website in a language that is written from right to left
// designed for multilingual websites with LTR et RTL

// Custom scrollbar everywhere
$custom-scroll         : true !default;


// hyphens
$hyphenation           : false !default;

// clear floats
$use-clearleft_right   : false !default;
$use-clearhidden       : false !default;
$use-clearfix          : false !default;

// color reset for mark tag
$use-color-reset-mark  : true !default;
$default-bgColor-mark  : #ff0 !default;


// vertical rhythm
// possible values     : 'double_top_single_bottom', 'single_top_single_bottom', 'single_top', 'single_bottom'
$vertical-rhythm        : 'single_bottom' !default;

// units for typo
// possible values     : 'use_em',  'use_rem', 'use_rem_with_em_fallback'
$typo-unit             : 'use_rem' !default;

// applies 62.5% on html (to make 10px default font size), simplifies rem calculation
$root-equiv-10-px      : true !default;

// basic premise: default user setting for font size is at 16 pixels in the browser
// you should NEVER update this value, however… who can predict the future…
$root-default-font-size: 16 !default;

// applies main colors on body tag
$apply-body-styles     : true !default;

// others
$use-reset-button      : true !default;
$use-ie-calc-font-fallback: false !default;
$use-old-ie-fallbacks  : true !default;
$use-height-auto-img   : true !default;
$use-height-auto-td    : true !default;
$use-height-auto-table : true !default;

// default config for webpack, can be overriden by "global config" in styles-pm.scss
$path-images           : '../../assets/img/shared/' !default;


// variables for global layouts, allowing you to use calc for components and adapt quickly if needed
$header-height         : 8rem !default;
$width-sidebar         : 24rem !default; // main navigation
$toolbar-height        : 5rem !default;
$context-bar-width     : 25vw !default; // context bar on the right
$context-bar-min-width : 30rem !default;
$context-bar-max-width : 40rem !default;

$default-height-fields : 3.5rem !default;

$conversations-column-width: 35% !default;  // used also to align search bar on top

$pm-label-width: 18em !default;


// Sass functions: don’t touch if you are not sure ;)

@function em($px, $base: $base-font) {

  @return ($px / $base) * 1em;

}

@function rem($px, $reset-applied: $root-equiv-10-px, $user-default-font-size: $root-default-font-size) {

  @if ( $reset-applied == true ) {
      @return ($px / 10) * 1rem;
  }
  @else {
         @return ($px / $user-default-font-size) * 1rem;
		}

}


// calculated via https://rocssti.net/en/builder-css
// based on http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil

@function line-height ($font-size, $base-height, $base-font, $type-vr) {

  $coef: ceil(1 / ($base-height * $base-font / $font-size));
  $height: ($base-font * $base-height / $font-size) ;

  @return ($height * $coef) ;

}


@function margin-em ($font-size, $base-height, $base-font, $type-vr) {

  $coef: ceil(1 / ($base-height * $base-font / $font-size));
  $other_coef: ceil($base-height * $base-font / $font-size);
  $height: ($base-font * $base-height / $font-size) ;
  $margin: ($height * $coef );

  @if $type-vr == 'double_top_single_bottom' {
     @return ( ($margin * $other_coef)*1em 0 ( ($margin/2) * $other_coef) *1em 0 );
  }
  @if $type-vr == 'single_top_single_bottom' {
	@return ( ( ($margin/2) * $other_coef) *1em 0 );
  }
  @else if $type-vr == 'single_bottom' {
     @return ( 0 0 ( ($margin/2) * $other_coef) *1em 0 );
  }
  @else if $type-vr == 'single_top' {
     @return ( ( ($margin/2) * $other_coef) *1em 0 0 0 );
  }
  @else if $type-vr == 'double_top_double_bottom_without_coef' {
     @return (($margin *1em) 0);
  }
}


@mixin rhythm( $value, $type-vr: $vertical-rhythm, $type-unit: $typo-unit ){

  @if $type-unit == 'use_em' {
     font-size: em($value);
  }
  @else if $type-unit == 'use_rem' {
     font-size: rem($value);
  }
  @else if $type-unit == 'use_rem_with_em_fallback' {
     font-size: em($value);
     font-size: rem($value);
  }
  line-height: line-height($value, $l-h, $base-font, $type-vr);
  margin: margin-em($value, $l-h, $base-font, $type-vr) ;

}


@mixin vendor-prefix($property, $value, $prefixes: webkit moz ms o) {

  @if $prefixes {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }
  }
  #{$property}: $value;

}


@mixin color-opacity($color, $opacity: 0.9) {
    color: $color; /* The Fallback */
    color: rgba($color, $opacity);
}

@mixin background-opacity($color, $opacity: 0.9) {
    background-color: $color; /* The Fallback */
    background-color: rgba($color, $opacity);
}



// Replace `$search` with `$replace` in `$string`
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}




// Generate margins
// example
// $list-margin: mt, mr, mb, ml, m;
// $list-margin-values: 0, 1, 2, 3; // specify 2.5 if needed

@mixin margin-generator ($list-margin, $list-margin-values, $prefix: "") {

  @each $margin-type in $list-margin {
     @each $margin in $list-margin-values {
        //$temp_m : str-slice($margin-type, 0, 1);
        $temp_t : str-slice($margin-type, 2, 3);

        $property: margin;

        @if $temp_t == t {
           $property: margin-top;
        } @else if $temp_t == r {
           $property: margin-right;
        } @else if $temp_t == b {
           $property: margin-bottom;
        } @else if $temp_t == l {
           $property: margin-left;
        }


        $value : $margin + 0em;
        /* #{$value} */

        @if $margin == 0 {
           $value : $margin;
        }

        // convert to string
        $text-margin: $margin + '';
        // 1.5 = 1-5
        $property-class: str-replace($text-margin, '.', '-');

        // . mr 1-5 { margin-right: 1.5em ;}
        .#{$prefix}#{$margin-type}#{$property-class} { #{$property}: #{$value}; }


        }
     }

}



// Generate paddings
// example
// $list-padding: pt, pr, pb, pl, p;
// $list-padding-values: 0, 1, 2, 3; // specify 2.5 if needed

@mixin padding-generator ($list-padding, $list-padding-values, $prefix: "") {

  @each $padding-type in $list-padding {
     @each $padding in $list-padding-values {
        //$temp_p : str-slice($padding-type, 0, 1);
        $temp_t : str-slice($padding-type, 2, 3);

        $property: padding;

        @if $temp_t == t {
           $property: padding-top;
        } @else if $temp_t == r {
           $property: padding-right;
        } @else if $temp_t == b {
           $property: padding-bottom;
        } @else if $temp_t == l {
           $property: padding-left;
        }

        $value : $padding + 0em;
        @if $padding == 0 {
           $value : $padding;
        }

        // convert to string
        $text-padding: $padding + '';
        // 1.5 = 1-5
        $property-class: str-replace($text-padding, '.', '-');

        .#{$prefix}#{$padding-type}#{$property-class} { #{$property}: #{$value}; }


        }
     }
}


//
// Responsive management in em
//

@mixin respond-to ($breakpoint, $query-type : 'max') {
  @if $query-type == "max" {
     @media (max-width: em($breakpoint, $root-default-font-size)) {
      @content;
    }
  }

  @else if $query-type == "min" {
     @media (min-width: em($breakpoint + 1, $root-default-font-size)) {
      @content;
    }
  }

  @else if $query-type == "height" {
     @media (max-height: em($breakpoint, $root-default-font-size)) {
      @content;
     }
  }

  @else if $query-type == "min-height" {
	@media (min-height: em($breakpoint, $root-default-font-size)) {
	 @content;
	}
 }

  @else  {
    @warn "Type non supported.";
  }
}


//
// body::before: to get current breakpoint in JS
//
@mixin body-before ($value-content, $display-none : false) {
  @if $value-content != "" {
    body::before {
      content: '#{$value-content}';
      @if $display-none == true {
        display: none;
      }
    }
  }
  @else  {
    @warn "$value-content not specified";
  }

}


//
// Easing functions for transitions and animations
// Learn more at http://easings.net/
//

@function easing($type: 'ease') {

	$value: '';

	@if      $type == 'linear'         { $value: '0, 0, 1, 1'; }
	@else if $type == 'ease'           { $value: '0.25, 0.1, 0.25, 1'; }
	@else if $type == 'easeIn'         { $value: '0.42, 0, 1, 1'; }
	@else if $type == 'easeOut'        { $value: '0, 0, 0.58, 1'; }
	@else if $type == 'easeInOut'      { $value: '0.42, 0, 0.58, 1'; }

	@else if $type == 'easeInSine'     { $value: '0.12, 0, 0.39, 0'; }
	@else if $type == 'easeInQuad'     { $value: '0.11, 0, 0.5, 0'; }
	@else if $type == 'easeInCubic'    { $value: '0.32, 0, 0.67, 0'; }
	@else if $type == 'easeInQuart'    { $value: '0.5 , 0, 0.75, 0'; }
	@else if $type == 'easeInQuint'    { $value: '0.64, 0, 0.78, 0'; }
	@else if $type == 'easeInExpo'     { $value: '0.7 , 0, 0.84, 0'; }
	@else if $type == 'easeInCirc'     { $value: '0.55, 0, 1, 0.45'; }
	@else if $type == 'easeInBack'     { $value: '0.36, 0, 0.66, -0.56'; }

	@else if $type == 'easeOutSine'    { $value: '0.61, 1, 0.88, 1'; }
	@else if $type == 'easeOutQuad'    { $value: '0.5, 1, 0.89, 1'; }
	@else if $type == 'easeOutCubic'   { $value: '0.33, 1, 0.68, 1'; }
	@else if $type == 'easeOutQuart'   { $value: '0.25, 1, 0.5, 1'; }
	@else if $type == 'easeOutQuint'   { $value: '0.22, 1, 0.36, 1'; }
	@else if $type == 'easeOutExpo'    { $value: '0.16, 1, 0.3, 1'; }
	@else if $type == 'easeOutCirc'    { $value: '0, 0.55, 0.45, 1'; }
	@else if $type == 'easeOutBack'    { $value: '0.34, 1.56, 0.64, 1'; }

	@else if $type == 'easeInOutSine'  { $value: '0.37, 0, 0.63, 1'; }
	@else if $type == 'easeInOutQuad'  { $value: '0.45, 0, 0.55, 1'; }
	@else if $type == 'easeInOutCubic' { $value: '0.65, 0, 0.35, 1'; }
	@else if $type == 'easeInOutQuart' { $value: '0.76, 0, 0.24, 1'; }
	@else if $type == 'easeInOutQuint' { $value: '0.83, 0, 0.17, 1'; }
	@else if $type == 'easeInOutExpo'  { $value: '0.87, 0, 0.13, 1'; }
	@else if $type == 'easeInOutCirc'  { $value: '0.85, 0, 0.15, 1'; }
	@else if $type == 'easeInOutBack'  { $value: '0.68, -0.6, 0.32, 1.6'; }

	@else { @error "'#{$type}' is not a correct value for easing()."; }

	@return cubic-bezier(unquote($value));
}