// A comment

@import
  "buttons.scss",
  "variables.scss",
  "forms.scss";

$blue         : blue;
$box-style1   : 5px, solid, red;
$grid-width   : 40px;
$box-style2   : (bStyle: dotted, bColor: blue, bWidth: medium);
$i            : 6;
$gutter-width : 10px;

@font-face {
  font-family : 'source-sans';
  font-style  : normal;
  font-weight : 600;
  src         : url('sourcesanspro-bold-webfont.eot');
  src         : url('sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
                url('sourcesanspro-bold-webfont.woff2') format('woff2'),
                url('sourcesanspro-bold-webfont.woff') format('woff'),
                url('sourcesanspro-bold-webfont.ttf') format('truetype'),
                url('sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');
}

@function box-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

@mixin does-parent-exist {
  @if & {
    &:hover {
      color : red;
    }
  } @else {
    a {
      color : red;
    }
  }
}

@mixin linx($link, $visit, $hover, $active) {
  a {
    color : $link;
    
    &:visited {
      position : absolute;
      color    : $visit;
    }
    
    &:hover {
      position : absolute;
      color    : $hover;
    }
    
    &:active {
      position : absolute;
      color    : $active;
    }
  }
}

%ib {
  @import
    "test.scss",
    "test1.scss";
  display        : inline-block;
  *display       : inline;
  zoom           : 1;
  vertical-align : top;
}

.btn-grey:hover,
.compact-theme a,
.compact-theme span,
.dropdown .btn-grey:hover,
.modal_text,
.status-text,
.warehouse-badge-count,
[class*="btn-grey"],
input[type="date"],
input[type="number"],
input[type="text"],
textarea,
th {
  color : $grey6;
}

@include boxy_button($button);

@each $animal, 
      $color, 
      $cursor in (puma, black, default), 
      (sea-slug, blue, pointer), 
      (egret, white, move) {
  .#{$animal}-icon {
    border           : 2px solid $color;
    background-image : url('/images/#{$animal}.png');
    cursor           : $cursor;
  }
}

/**
 * Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
 * doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
 * veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
 * ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
 * consequuntur magni dolores eos qui ratione voluptatem
 */

.body,
.head {
  display  : block;
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

.head {
  height : 38px;
}

.arrow {
  @extend %ib;
}

.arrow-right {
  @extend               %ib;
  width               : 8px;
  height              : 8px;
  background-position : -30px -0px;
}

* {
  box-sizing     : border-box;
  margin         : 0;
  padding        : 0;
  vertical-align : top;
}

@include button-grey(".button");

h1,
h2,
h3 {
  display : block;
}

._hidden {
  display : none;
}

hr {
  margin     : 20px 0;
  border     : none;
  border-top : 1px solid $grey3;
  text-align : left;
}

@include button-blue(".button--primary");

h2 {
  color : $grey6;
}

/* Settings Address Box */

.col2of2-sm.settings_address-box ~ .settings_address-box {
  margin-top : 15px;
}

/* ------------- Select */

.printer-select {
  @extend         %ib;
  padding       : 5px;
  border        : 2px solid transparent;
  border-radius : 12px;
  transition    : border-color 0.2s;
  
  .printer-select input[type="radio"] {
    display : none;
  }
}

/* Badges & Counts */

.count {
  @include        boxy;
  @include        boxy($box-style1...);
  @extend         %ib;
  min-width     : 30px;
  padding       : 0 6px;
  color         : #FFF;
  border-radius : 10px;
  background    : #5B5B5B;
  text-align    : center;
  font-size     : $fontSize_small;
  line-height   : 19px;
}

.body,
.head {
  min-width : 1020px;
}

.select-none,
.select-none * {
  -moz-user-select    : none;
  -ms-user-select     : none;
  -webkit-user-select : none;
  user-select         : none;
  cursor              : default;
}

/* Ship Products */

.label,
.text {
  overflow      : hidden;
  text-overflow : ellipse;
  white-space   : nowrap;
}

@media
  screen
  and (max-width : 1174px) {
  .item-info-status .item-info {
    margin-bottom : 5px;
  }
}

.other-expenses_repeat-indicator {
  position     : relative;
  margin-top   : 4px;
  padding-left : 19px;
  font-size    : $fontSize_default;
  line-height  : 18px;
}

.first {
  @include boxy($box-style1...);
}

div {
  $this : that;
  @include cont {
    font-size  : 12px;
    font-style : italic;
  }
}

div {
  @include cont;
}

@for $i from 1 through 3 {
  .item-#{$i} {
    width : 2em * $i;
  }
}

@each $header, 
      $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size : $size;
  }
}

@while $i > 0 {
  $i : $i - 2;
  
  .item-#{$i} {
    width : 2em * $i;
  }
}

#sidebar {
  width : grid-width(5);
}

.empty {}

.empty_nested {
  .empty {}
}

@media
  only screen
  and (min-device-width : 320px)
  and (device-width     : 320px)
  and (max-device-width : 736px),
  tv
  and (min-width        : 320px)
  and (device-width     : 320px)
  and (width            : 736px) {
  .hamburger {
    top  : 10px;
    left : 10px;
  }
  
  .hamburger_icon {
    width               : 30px;
    height              : 30px;
    background-position : -200px -105px;
  }
  
  .hamburger_icon_empty {}
  
  %hamburger-icon {
    background-image : url('hamburger_mobile_icon_x1.png');
  }
  
  .hamburger_menu_item_label {
    font-size : $default - 1;
  }
  
  .hamburger_menu {
    width : 170px;
  }
}

.hamburger_icon_empty {}

.empty_nested {
  .empty {}
}

@media
  only screen
  and (min-device-pixel-ratio : 2),
  only screen
  and (min-resolution         : 192dpi) {
  .toolbar_icon {
    background-image : url('toolbarControl_x2.png');
  }
}

/* end upload css */
