@import "_colors";

@mixin tvd-z-depth-1 {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
}

@mixin tvd-z-depth-1-half {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.24);
}

@mixin tvd-z-depth-3 {
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.24);
}

// Flexbox
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex: $values;
  -webkit-flex: $values;
  -ms-flex: $values;
  flex: $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}

@mixin align($align) {
  -webkit-flex-align: $align;
  -ms-flex-align: $align;
  -webkit-align-items: $align;
  align-items: $align;
}

@mixin justify-content($val) {
  -webkit-justify-content: $val;
  justify-content: $val;
}

@mixin trans-prefix($value, $prefix: "") {
  $slice: str-slice(inspect($value), 0, 9);
  @if $slice == "transform" {
    #{$prefix}transition: #{$prefix}#{$value};
  } @else {
    #{$prefix}transition: $value;
  }
}

@mixin tve-transition($properties...) {
  @if length($properties) > 1 {
    $spec: ();
    @for $i from 1 through length($properties) {
      $spec: append($spec, nth($properties, $i), comma);
    }
  } @else {
    $spec: $properties;
  }
  @include trans-prefix($spec, -webkit-);
  @include trans-prefix($spec, -moz-);
  @include trans-prefix($spec);
}

$line-color: $gray5;

//display settings tabs
$gray-btn: $gray1;
$blue-btn: $base-blue;

//edit campaign
$line-gray: $gray2;
$blue-gray: $gray3;

//badges
$header-bar-color: $green1;
$footer-bar-color: $green2;
$widget-color: $blue1;
$campaign-fixed: $dark-blue;
$campaig-evergreen: $selected-color;
$campaign-rolling: $red1;

//collections
$collection-item-border: $gray4;

//other colors
$text-gray: $gray1;
$icon-gray: $gray6;
$text-green: $green3;
$text-blue: $blue1;

//timeline
$timeline-border-color: $gray3;
$timeline-date-color: $gray3;
$timeline-date-size: .75rem;
$timeline-add-new-button: $base-green;
$timeline-add-new-btn-color: $gray5;

//campaign list
$placeholder-border: $gray6;
$placeholder-bg: $gray7;
$placeholder-color: $gray8;
$campaign-color-paused: $red2;
$campaign-color-running: $base-green;

//tooltips
$tooltip-bubble-bg: $base-green;

//conversion
$conversion-timeline-bg: $gray5;
$conversion-icon-color: $base-green;
$conversion-icon-color2: $gray3;
$conversion-icon-color3: $blue1;

//lockdown
$lockdown-box-border: $gray9;

//gray box
$gray-box-bg: $gray10;
$gray-box-border: $gray11;
$disabled-btn-color: $gray12;

//switch
$lever-bg-color: $darker-teal;

//buttons
$blue-btn: $base-blue;
$red-btn: $red1;