/*The file suppose to contain all variables, mixins and extends*/

@import 'vendor.variables';

$screen-sm-min: 576px !default;
$screen-md-min: 768px !default;
$screen-lg-min: 992px !default;
$screen-xl-min: 1200px !default;

$screen-xs-max: calc(#{$screen-sm-min} - 1px);
$screen-sm-max: calc(#{$screen-md-min} - 1px);
$screen-md-max: calc(#{$screen-lg-min} - 1px);
$screen-lg-max: calc(#{$screen-xl-min} - 1px);

$color-solid-red: #ff0000 !default;
$color-pink: #a94442 !default;
$color-light-red: #f2dede !default;

// $color-orange: #ff6600 !default;

$color-bright-yellow: #ffc200 !default;
$color-light-yellow: #fff3cd !default;

$color-bright-green: #00bb00 !default;
$color-green: #245e03 !default;

$color-blue: #288cea !default;
$color-light-blue: #d1ecf1 !default;
$color-sky-blue: #afd9ee !default;

$color-black: #000 !default;
$color-transparent-black: rgba(0, 0, 0, 0.7) !default;
$color-solid-gray: #555555 !default;
$color-dark-gray: #474544 !default;
// $color-gray: #505050 !default;
$color-mild-gray: #777777 !default;
$color-blue-gray: #90949c !default;
$color-grad-gray: #ededed !default;
$color-shadow-gray: rgba(3, 3, 3, 0.175) !default;
$color-light-gray: #d1d1d1 !default;
$color-soft-gray: #ddd !default;
$color-white-gray: #eee !default;
$color-shade-gray: #efefef !default;
$color-light-shade-gray: #f3f3f3 !default;
$color-whitesmoke-gray: #f5f5f5 !default;
$color-solid-white: #ffffff !default;
$color-transparent: rgba(0, 0, 0, 0.09) !default;
$color-input-border: #ced4da;
$color-input-border-hover: #adadad;
$color-brand-teal: #2b99a8 !default;
$color-brand-gray: #374249 !default;

$color-primary: $color-brand-teal !default;
$color-secondary: $color-brand-gray !default;
$color-accent: #ef5c55 !default;

$color-app-bg: $color-solid-white !default;
// $color-bg-darken: $color-dark-gray !default;
// $color-links: $color-primary !default;
// $color-links-focus: $color-dark-gray !default;
$color-breadcrumb: $color-dark-gray !default;
// $color-button-text: $color-white-gray !default;
$color-button: $color-primary !default;
// $color-button-hover: darken($color-primary, 3) !default;
// $color-button-border: darken($color-primary, 6) !default;
$color-button-badge: $color-white-gray !default;
$color-dropdown-menu: $color-dark-gray !default;
$color-dropdown-active-text: $color-white-gray !default;
$color-dropdown-active-bg: $color-primary !default;
$color-progress-bar-info-bg: $color-primary !default;
$color-progress-bar-freespace-bg: $color-light-gray !default;
$color-progress-text: $color-black !default;
$color-tags-border: $color-light-gray !default;
$color-tags-box-shadow: $color-transparent !default;
$color-error-btn-bg: $color-light-red !default;
$color-error-btn-border: $color-pink !default;
$color-noscript-text: $color-mild-gray !default;
$color-required-text: $color-pink !default;

/*Login*/
$color-login-row-text: $color-solid-white !default;
$color-login-row-bg: $color-secondary !default;
$color-password-toggle-text: $color-solid-white !default;
$color-password-toggle-placeholder-text: $color-blue-gray !default;
$color-password-toggle-bg: $color-solid-gray !default;
$color-password-toggle-focus: $color-primary !default;
// $color-login-active-row-bg: $color-light-yellow !default;
// $color-login-active-row-text: $color-black !default;

/*Landing Page*/

/*InfoGroup*/
// $color-info-group-underline: $color-whitesmoke-gray !default;

/*InfoCard*/
// $color-info-card-background: $color-whitesmoke-gray !default;
$color-info-card-border: $color-soft-gray !default;

/*Navigation*/
$color-navbar-bg: $color-secondary !default;
$color-navbar-brand: $color-white-gray !default;
$color-nav-top-bar: $color-primary !default;
$color-nav-bottom-bar: $color-primary !default;
$color-nav-toggle-bar: $color-white-gray !default;
$color-nav-toggle-shadow: $color-solid-white !default;
$color-nav-collapse-border: $color-white-gray !default;
$color-nav-open-bg: $color-primary !default;
$color-nav-links: $color-white-gray !default;
$color-nav-links-hover: $color-primary !default;
$color-nav-active-link-bg: $color-primary !default;
$color-nav-border-top-collapse: $color-white-gray !default;

$navbar-height: 43px;
$pwd-exp-height: 37.6px;

/*Helper*/
$color-helper-bg: $color-primary !default;

/*Table*/
$color-table-seperator-border: $color-transparent !default;
$color-table-input-border: $color-transparent !default;
$color-table-dropdown-bg: $color-whitesmoke-gray !default;
$color-table-header-bg: $color-whitesmoke-gray !default;
$color-table-header-border: $color-light-gray !default;
$color-table-active-row: $color-sky-blue !default;
$color-table-active-row-hover: $color-light-blue !default;
// $color-table-progress-bar-bg: $color-sky-blue !default;
$color-table-progress-bar-active: $color-primary !default;
$color-table-gradient-1: $color-whitesmoke-gray !default;
$color-table-gradient-2: $color-grad-gray !default;
$color-table-sort: $color-primary !default;
$color-table-empty-row: $color-light-yellow !default;
$color-table-hover-row: $color-white-gray !default;
$color-table-even-row-bg: $color-solid-white !default;
$color-table-odd-row-bg: $color-whitesmoke-gray !default;
$color-table-datatable-header: $color-whitesmoke-gray !default;

/*Chart tooltip*/
$color-chart-tooltip-bg: $color-transparent-black !default;
$color-chat-tooltip-text: $color-solid-white !default;
$color-chart-tooltip-border: $color-black !default;

/*Popover*/
$color-popover-seperator-text: $color-blue-gray !default;
$color-popover-seperator-bg: $color-white-gray !default;
$color-popover-message-text: $color-dark-gray !default;
$color-popover-table-text: $color-dark-gray !default;
$color-popover-date: $color-solid-gray !default;

/*RGW user form*/
$color-rgw-icon: $color-blue-gray !default;

@mixin table-cell {
  padding: 5px;
  border: none;
  border-left: 1px solid $color-light-gray;
  border-bottom: 1px solid $color-light-gray;
}

@mixin hf {
  border-bottom: 1px solid $color-light-gray;
  background-color: $color-whitesmoke-gray;
}

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(
          #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
        );
      }
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}