@import "susy";

// grid
:global {
  $suzy: (
    columns: 12,
    container: 1200px,
    gutters: 0.632,
    global-box-sizing: border-box
  );
  @include layout($suzy);
}

// font
$title-font-family: Ubuntu, Arial, sans-serif;
$main-font-family: OpenSans, Arial, sans-serif;
$main-font-family-light: OpenSans, Arial, sans-serif;
$alt-font-family: "OpenSans", Arial, sans-serif;
@mixin title-font() {
  font-family: $title-font-family;
  font-weight: 400;
}

@mixin title-font-light() {
  font-family: $title-font-family;
  font-weight: 100;
}

$titles-font-family: $main-font-family;
$text-font-family: $alt-font-family;

$smaller-font-size: 12px;
$base-font-size: 14px;
$medium-font-size: 16px;
$big-font-size: 18px;
$bigger-font-size: 20px;
$base-line-height: 1.5em;

// colors
$white: white;
$xx-light-grey: #fdfdfe;
$x-light-grey: #f7f7f7;
$light-grey: #eaebed;
$medium-light-grey: #ccc;
$grey: #9e9e9e;
$medium-dark-grey: #64748b;
$dark-grey: #4a4a4a;
$darker-grey: #404040;
$black-grey: #333;

$flive-text-black: $black-grey;
$flive-text-light-grey: $grey;
$flive-text-dark-grey: $dark-grey;

$flive-red: #D05353;
$flive-orange: #FFA000;
$flive-purple: #8024FF;
$flive-light-purple: lighten($flive-purple, 15%);
$flive-green: #00b873;
$flive-dark-green: darken($flive-green, 5%);
$flive-lagoon: #00dfff;
$flive-blue: #4182ff;
$flive-light-blue: #69B5DD;
$flive-night-blue: #230066;
$flive-light-night-blue: lighten($flive-night-blue, 31%);
$flive-grey: $grey;

$flive-light-grey: $x-light-grey;
$flive-medium-grey: $light-grey;
$flive-dark-grey: $medium-light-grey;

// sensit
$sensit-button-blue:#167FFC;
$sensit-button-light-blue: #469EFD;
$sensit-button-blue-gradient: linear-gradient(
  to right, $sensit-button-blue 0%, $sensit-button-light-blue 100%
);

// form
$background-selected: adjust_color($flive-blue, $saturation: -5, $lightness: +33%);
$background-selected-shadow: adjust_color($flive-blue, $saturation: -5, $lightness: +31%);
$background-list-selected: adjust_color($flive-lagoon, $saturation: -5, $alpha: -0.7);

// band
$band-night-blue: adjust-color($flive-night-blue, $saturation: -60, $lightness: +25%);
$band-night-blue--shadow: $flive-night-blue;
$band-night-blue--selected: adjust-color($flive-night-blue, $saturation: -70, $lightness: +35%);

// layout;

$header-height-desktop: 4rem;
$header-height-mobile: 44px;
$header-border-size: 1px;

$column-width: 280px;
$column-border-size: 1px;

$sidemenu-width-sm: 13rem;
$sidemenu-width-md: 16rem;
$sidemenu-width-lg: 19rem;

$footer-min-height: 3rem;

$content-padding-desktop: 20px;
$content-padding-mobile: 16px;

$layout-borders-color: $light-grey;
$layout-borders-color-darken: $medium-light-grey;

$breakpoint-max-mobile: 500px;
$breakpoint-max-tablet-portrait: 768px;
$breakpoint-max-tablet-landscape: 1024px;

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
$screen-xs-min: 580px;
// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min !default;
// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md: 1024px !default;
$screen-md-min: $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min !default;
// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg: 1280px !default;
$screen-lg-min: $screen-lg !default;
$screen-xl-min: $screen-lg + 100 !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min !default;
// So media queries don't overlap when required, provide a maximum
$screen-xxs-max: ($screen-xs-min - 1) !default;
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
$screen-lg-max: ($screen-xl-min - 1) !default;

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Extra small screen / mobile
//** For `$screen-xs-min` and up.
$container-xs: 580px !default;

// Small screen / tablet
$container-tablet: 720px !default;
//** For `$screen-sm-min` and up.
$container-sm: $container-tablet !default;

// Medium screen / desktop
$container-desktop: 960px !default;
//** For `$screen-md-min` and up.
$container-md: $container-desktop !default;

// Large screen / wide desktop
$container-large-desktop: 1200px !default;
//** For `$screen-lg-min` and up.
$container-lg: $container-large-desktop !default;

// modal
$modal-title-color: $grey;
// forms
$form-label-color: $grey;
$form-control-background-color: $xx-light-grey;
//$form-control-background-color: #fdfeff;
$form-control-text-color: $black-grey;
$form-control-border-color: #bfc3ce;
// form disable
$form-disable-background-color: $light-grey;
$form-disable-text-color: $grey;
$form-disable-border-color: $medium-light-grey;

//status
// status colors:
$state-success-text-color: #3c763d;
// $flive-green: #029885;
$state-success-background-color: adjust-color($state-success-text-color, $lightness: +58%);
$state-success-border-color: darken(adjust-hue($state-success-background-color, -10), 5%);

$state-info-text-color: #31708f;
$state-info-background-color: adjust-color($state-info-text-color, $lightness: +52%);
$state-info-border-color: darken(adjust-hue($state-info-background-color, -10), 7%);

$state-warning-text-color: #FFA000;
$state-warning-background-color: adjust-color($state-warning-text-color, $lightness: +40%);
$state-warning-border-color: darken(adjust-hue($state-warning-background-color, -10), 5%);

$state-danger-text-color: #a94442;
$state-danger-background-color: #f2dede;
$state-danger-background-color-odd: #dccece;
$state-danger-border-color: darken(adjust-hue($state-danger-background-color, -10), 5%);

$alert-success-background-color: $state-success-background-color;
$alert-success-text-color: $state-success-text-color;
$alert-success-border-color: $state-success-border-color;

$alert-info-background-color: $state-info-background-color;
$alert-info-text-color: $state-info-text-color;
$alert-info-border-color: $state-info-border-color;

$alert-warning-background-color: $state-warning-background-color;
$alert-warning-text-color: $state-warning-text-color;
$alert-warning-border-color: $state-warning-border-color;

$alert-danger-background-color: $state-danger-background-color;
$alert-danger-text-color: $state-danger-text-color;
$alert-danger-border-color: $state-danger-border-color;

$page-section-border-color: $flive-blue;
$page-section-grey-background: #fcfcfc;

$tunnel-disable-step: lighten($flive-grey, 24);
$tunnel-disable-step-text: lighten($flive-grey, 12);
$tunnel-content-border: #e4e5e8;
$tunnel-related-content-background: $page-section-grey-background;

// navs
$nav-border-color: #ddd;
$nav-link-color: $flive-text-dark-grey;
$nav-border-inactive-color: #eee;
$nav-border-active-color: $flive-dark-green;
$nav-section-title-color: $flive-text-dark-grey;
$nav-section-title-border: #dedede;
$nav-section-title-background: #f8f8f8;
$nav-section-child-background: #fcfcfc;


// modal
$modal-overlay-padding-bottom: 100px;
$modal-overlay-background-color-mobile: #fff;
$modal-overlay-background-color: rgba(255, 255, 255, 0.901961);

$modal-content-font-size: $bigger-font-size;
$modal-content-text-align: center;
$modal-content-background-color: #fff;
$modal-content-border-radius: 0;
$modal-content-padding: 0;
$modal-content-border: 1px solid $layout-borders-color-darken;
$modal-content-box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.07);

@mixin clear-fix($where) {
  &:#{$where} {
    clear: both;
    content: '';
    display: table;
  }
}

// collapsible
$collapsible-plain-content-background: $x-light-grey;
$collapsible-plain-content-border: $light-grey;

@mixin column-centered($max-size: 'lg') {
  display: block;
  padding: 0 1.5rem;
  @media (min-width: $screen-xs-min) {
    padding: 0;
    @include container($container-xs);
    // width: $container-xs;
  }
  @if $max-size == 'sm' or $max-size == 'md' or $max-size == 'lg' {
    @media (min-width: $screen-sm-min) {
      @include container($container-sm);
      // width: $container-sm;
    }
  }
  @if $max-size == 'md' or $max-size == 'lg' {
    @media (min-width: $screen-md-min) {
      @include container($container-md);
      // width: $container-md;
    }
  }
  @if $max-size == 'lg' {
    @media (min-width: $screen-lg-min) {
      @include container($container-lg);
      // width: $container-lg;
    }
  }
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

@mixin flex-column-centered-size($size: 960px) {
  > *:first-child, > *:last-child {
    min-width: calc((100% - #{$size}) / 2);
  }
}

@mixin flex-column-centered($max-size: 'lg') {
  > * {
    flex-grow: 1;
  }
  > *:first-child, > *:last-child {
    flex-grow: 0;
  }
  @if $max-size == 'xs' or $max-size == 'sm' or $max-size == 'md' or $max-size == 'lg' {
    @media (min-width: $screen-xs-min) {
      @include flex-column-centered-size($container-xs);
    }
  }
  @if $max-size == 'sm' or $max-size == 'md' or $max-size == 'lg' {
    @media (min-width: $screen-sm-min) {
      @include flex-column-centered-size($container-sm);
    }
  }
  @if $max-size == 'md' or $max-size == 'lg' {
    @media (min-width: $screen-md-min) {
      @include flex-column-centered-size($container-md);
    }
  }
  @if $max-size == 'lg' {
    @media (min-width: $screen-lg-min) {
      @include flex-column-centered-size($container-lg);
    }
  }
}

@mixin modal-content($max-size: 'lg') {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  @if $max-size == 'xs' {
    @media (min-width: $screen-sm-min) {
      min-height: auto;
      top: 3rem;
      left: 50%;
      width: $container-xs;
      margin-left: -($container-xs / 2);
    }
  }
  @if $max-size == 'sm' or $max-size == 'md' or $max-size == 'lg' {
    @media (min-width: $screen-sm-min) {
      min-height: auto;
      top: 3rem;
      left: 50%;
      width: $container-sm;
      margin-left: -($container-sm / 2);
    }
  }
  @if $max-size == 'md' or $max-size == 'lg' {
    @media (min-width: $screen-md-min) {
      width: $container-md;
      margin-left: -($container-md / 2);
    }
  }
  @if $max-size == 'lg' {
    @media (min-width: $screen-lg-min) {
      width: $container-lg;
      margin-left: -($container-lg / 2);
    }
  }
}

@mixin dash-lagoon-active($color:$flive-night-blue) {
  color: $color;
  &:before {
    margin: 0 -1.25em;
    width: 2.5em;
  }
}


@mixin dash-button($borderColor: $flive-lagoon, $color:$flive-night-blue, $activeColor:$flive-night-blue) {
  position: relative;
  background: none;
  border: none;
  color: $color;
  font-weight: 100;
  .content:before {
    transition: all .2s linear;
    border-top: 3px solid $borderColor;
    content: "";
    display: block;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    width: 0;
    margin: 0;
  }
  &:hover .content, &.state-opened .content, &.state-dropdown-opened .content {
    @include dash-lagoon-active($activeColor);
  }
}

@mixin dash-lagoon-link() {
  & a {
    text-decoration: none;
    cursor: pointer;
    padding: 12px;
    font-family: sans-serif;
    font-size: 13px;
    @include dash-button();

    &:focus {
      outline: 0;
    }
  }
}

@mixin disabled-button() {
  cursor: not-allowed;
  opacity: 0.6 !important;
  transition-property: none !important;
  transform: none !important;
  animation: none !important;
}

@mixin input() {
  border: 1px solid $form-control-border-color;
  color: $form-control-text-color;
  background: $form-control-background-color;
  border-radius: 0;
}

@mixin column($span1, $span2 : 12) {
  vertical-align: top;
  display: inline-block;
  width: span($span1 of $span2);
  min-width: span($span1 of $span2);
  max-width: span($span1 of $span2);
  margin-right: gutter();
  &:last-child {
    margin-right: 0;
  }
}

@mixin blocks-wrapper($span1, $span2 : 12) {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  > * {
    vertical-align: top;
    display: inline-block;
    width: span($span1 of $span2);
    min-width: span($span1 of $span2);
    max-width: span($span1 of $span2);
    margin-right: gutter();
    &:nth-child(#{$span2 / $span1}n) {
      margin-right: 0;
    }
  }
}

@mixin buttonFontSize($size) {
  @if $size == 'sm' {
    font-size: 0.8rem;
  }
  @if $size == 'md' {
    font-size: 1rem;
  }
  @if $size == 'lg' {
    font-size: 1.2rem;
  }
}

@mixin iconFontSize($size) {
  @if $size=='xs' {
    font-size: 1rem;
  }
  @if $size=='auto' {
    font-size: 1em;
  }
  @if $size=='sm' {
    font-size: 1.4rem;
  }
  @if $size=='md' {
    font-size: 2.2rem;
  }
  @if $size=='lg' {
    font-size: 3rem;
  }
}

@mixin sideMenuPadding($level:0, $base: 1rem) {
  @if $level==0 {
    padding: $base;
    padding-left: calc(#{$base} * 2)
  } @else {
    padding: calc(#{$base} * 0.5);
    padding-left: calc((#{$level} + 1) * #{$base} * 2);
    padding-right: $base;
  }
}

@mixin sideMenuActive() {
  &, > * {
    color: $flive-light-blue;
  }
  &::before {
    content: "";
    background-color: $flive-light-blue;
    height: 58%;
    width: .4em;
    position: absolute;
    top: 21%;
    left: 0;
  }
}

@mixin stepSize($size) {
  font-size: $size;
  .decorator--primary {
    > * {
      font-size: $size !important;
    }
  }
  .title--primary:after {
    top: $size;
    height: $size * 0.3;
    width: $size * 0.3;
    margin-top: $size * -0.162;
  }
  &:before, &:after {
    top: $size;
  }
}

@mixin stepSizeMobile() {
  @include stepSize (1.4rem);
  .title--primary {
    font-size: 0.8rem;
  }
  &:not(.step--primary--selected) {
    font-size: 1.4rem * 0.7;
    .title--primary {
      font-size: 0.6rem;
    }
    .decorator--primary {
      margin: 0.45em auto 0.7em auto;
      border-width: 1px;
      > * {
        font-size: 1.4rem * 0.7 !important;
      }
    }
  }
}

@import "flive-override";