/*
 * Variables used across files
 */

$ColorUIBackground: #262626;   /* Dark Grey */
/* $ColorScreenPrimary: #f34e1d; */   /* JW */
$ColorScreenPrimary: #ed3618;   /* Orange */
$ColorElementPrimary: #0b6672; /* Teal */
$ColorText: #ffffff;           /* White */
$ColorLink: #fc0;           
$ColorLinkHover: #82AEAF;
$ColorSidebarText: #a0b9bd;
$ColorScreenBackground: lighten($ColorUIBackground, 10%);
$ColorTextBoxBackground: #c5c5c5;
$ColorTextBoxDisabledBackground: #999;
$ColorRecordingBackground: #471f18;

$ColorTextHighlight: white;
$ColorTextTypical: #CCCCCC;
$ColorTextDisabled: #AAAAAA;

$color1: #006AB6;     /* mid blue */
$color2: #9A9084;     /* warm gray */
$color3: #B11254;     /* magenta */
$color4: #029FCA;     /* bright blue */
$color5: #B19975;     /* tan */
$color6: #F2532B;     /* orange */
$color7: #0A3369;     /* deep blue */
$color8: #FFC742;     /* gold */
$color9: #7D8590;     /* slate blue */
$color10: #81C882;     /* seafoam */
$color11: #f0eacb;     /* warm white */
$color12: darken($color5, 80%);  /* warm black */
$color13: #E9D384;     /* wheat */
$translucent1: rgba(#000, 0.3);
$translucent2: rgba(#fff, 0.4);
$text: #f3f1ee;

$gradient-diff: 30%; $link: $color8;
$border: hsl(210, 50%, 45%);

$narrow-screen: 1000px; // 990 ? 1000 ?
$short-screen: 600px; // toolbars / chrome for x768

$latencyBadgeMe: #dddddd;
$latencyBadgeGood: #71a43b;
$latencyBadgeFair: #cc9900;
$latencyBadgePoor: #980006;
$latencyBadgeUnacceptable: #868686;
$latencyBadgeUnknown: #868686;

$good: #71a43b;
$unknown: #868686;
$poor: #980006;
$error: #980006;
$fair: #cc9900;

$labelFontFamily: Arial, Helvetica, sans-serif;
$labelFontSize: 12px;

@mixin labelFont {
  font-family: $labelFontFamily;
  font-size: $labelFontSize;
}


@mixin border_box_sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin content_box_sizing {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

@mixin border-radius($radius) {
  -moz-border-radius:$radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

/** IE10 and above only */
@mixin vertical-align-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-pack:space-around;
  -webkit-justify-content:space-around;
  -moz-justify-content:space-around;
  -ms-flex-pack:space-around;
  justify-content:space-around;

  -webkit-flex-line-pack:center;
  -ms-flex-line-pack:center;
  -webkit-align-content:center;
  align-content:center;

  -webkit-flex-direction:row;
  -moz-flex-direction:row;
  -ms-flex-direction:row;
  flex-direction:row;
}

@mixin vertical-align-column {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-pack:space-around;
  -webkit-justify-content:space-around;
  -moz-justify-content:space-around;
  -ms-flex-pack:space-around;
  justify-content:space-around;

  -webkit-flex-line-pack:center;
  -ms-flex-line-pack:center;
  -webkit-align-content:center;
  align-content:center;

  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}

// Single side border-radius

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
  -webkit-border-top-left-radius: $radius;
  border-top-left-radius: $radius;
  background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
  background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
  background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
  -webkit-border-top-left-radius: $radius;
  border-top-left-radius: $radius;
  background-clip: padding-box;
}

@mixin flat_dropdown {
  box-shadow: none !important;
  color: #666666;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin white_dropdown {
  ul {
    background-color:white;
  }
}

@mixin no_top_padding_dropdown {
  .selected {
    padding-top:0;
  }

  .carat {
    margin-top:-9px;
  }
}



@mixin client-state-box {

  .client-state {
    position:relative;
    text-align:center;
    padding:3px;
    @include border_box_sizing;
    color:white;

    &.unknown {
      background-color: $error;
    }

    &.error {
      background-color: $error;
    }

    &.hq {
      background-color: $good;
    }

    &.sq {
      background-color: $good;
    }

    &.missing {
      background-color: $error;
    }

    &.not_mine {
      background-color: $good;
    }

    &.discarded {
      background-color: $unknown;
    }

    .retry {
      display:none;
      position:absolute;
      line-height:28px;
      top:4px;
      right:8px;
      z-index:1;
    }
  }
}

@mixin upload-state-box {

  .upload-state {
    position:relative;
    text-align:center;
    padding:3px;
    @include border_box_sizing;
    color:white;

    &.unknown {
      background-color: $unknown;
    }

    &.error {
      background-color: $error;
    }

    &.missing {
      background-color: $error;
    }

    &.upload-soon {
      background-color: $fair;
    }

    &.uploaded {
      background-color: $good;
    }

    &.not_mine {
      background-color: $good;
    }

    .retry {
      display:none;
      position:absolute;
      line-height:28px;
      visibility: middle;
      top:4px;
      right:8px;
    }
  }
}


@mixin mix-state-box {

  .mix-state {
    position:relative;
    text-align:center;
    padding:3px;
    @include border_box_sizing;
    color:white;

    &.still-uploading { background-color: $fair; }
    &.discarded {background-color: $unknown; }
    &.unknown { background-color: $unknown; }
    &.error { background-color: $error; }
    &.mixed { background-color: $good; }
    &.mixing {background-color: $good; }
    &.waiting-to-mix {background-color: $good; }
    &.stream-mix { background-color: $fair; }
  }
}

.badge-number {
  font-size:25px;
  color:white;
  background-color:$ColorScreenPrimary;
  width:30px;
  height:30px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  text-align:center;
  display:inline-block;
  border:2px solid white;
  margin-right:10px;

  &.disabled {
    color:$ColorTextDisabled;
    border-color:$ColorTextDisabled;
    background-color:transparent;
  }
}

.white-bordered-button {
  font-size:20px;
  font-weight:bold;
  background-color:white;
  color:$ColorScreenPrimary;
  border:3px solid $ColorScreenPrimary;
  padding:18px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
}


.capitalize {
  text-transform: capitalize
}

.vertical-helper {
  display: inline-block;
  height: 100%;
}
