@import "compass/utilities/general/clearfix";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/transition";
//
@import "../../mixins/paddingbox";
@import "../../mixins/devices";
@import "../../mixins/x1x2";
@import "../../declarations/dimensions";
@import "../../declarations/colors";
@import "../../declarations/fonts";

#new_screen-ui {
  @include clearfix;
  @include paddingbox(618px, 360px, $def_margin_unit / 2, 0, $def_margin_unit / 2, 0);

  margin-top: $def_margin_unit;
  //////
  input[type="hidden"] {
    display: none;
  }
  input#screen-name {
    @include paddingbox(614px, 60px, 0, 0, 0, $def_margin_unit / 4);

    float: left;
    font-size: $large;
    margin-bottom: $def_margin_unit;
    border-color: #555;

  }

  form#dropImage {

    @include paddingbox(614px, 74px, 23px, 0, 0, $def_margin_unit / 4);
    @include border-radius(4px);
    @include transition-property("background-color");
    @include transition-property("color");
    @include transition-duration("0.5s");

    float: left;
    font-size: $large;
    margin-bottom: $def_margin_unit * 2;
    border: solid 1px $whiteFull;
    text-align: center;
    color: $whiteFull;

    div.dz-preview {
      display: none !important;
    }
  }

  div#uploadProgress {
    @include paddingbox(614px, 40px, 0, 0, 0, 0);
    @include border-radius(4px);

    display:none;
    float: left;
    border: solid 1px $whiteFull;
    margin-bottom: $def_margin_unit * 2;
    overflow: hidden;

    div.bar {
      height: 98.2%;
      width: 30%;
      padding-left:0.8%;
      padding-top:1.8%;
      background-image: url(../img/loaders/bar.png);
      background-repeat: repeat-x;

    }
  }

  div#uploadProgress.active{
    display: block;
  }

  form#dropImage.dz-drag-hover {
    background-color: $white_25;
    color: #000;
  }

  @include iPodWebappPortrait() {
    @include paddingbox(316px, 360px, $def_margin_unit / 2, 0, $def_margin_unit / 2, 0);

    input#screen-name {
      @include paddingbox(314px, 30px, 0, 0, 0, $def_margin_unit / 4);

      float: left;
      font-size: $normal;
      margin-bottom: $def_margin_unit * 3;
      margin-top: $def_margin_unit * 3;

    }

    form#dropImage {

      @include paddingbox(314px, 110px, 42px, 0, 0, $def_margin_unit / 4);
      @include border-radius(4px);
      @include transition-property("background-color");
      @include transition-property("color");
      @include transition-duration("0.5s");

      float: left;
      font-size: $normal;
      display: block;
      margin-bottom: $def_margin_unit * 2;
      border: solid 1px $white;
      text-align: center;
      color: $whiteFull;

      div.dz-preview {
        display: none !important;
      }
    }

    div#uploadProgress {
      @include paddingbox(314px, 40px, 0, 0, 0, 0);
      @include border-radius(4px);

      display:none;
      float: left;
      border: solid 1px $white;
      margin-bottom: $def_margin_unit * 2;
      overflow: hidden;

      div.bar {
        height: 100%;
        width: 30%;
        background-color: #19d167;
        background-image: url(../img/loaders/bar.png);
        background-repeat: repeat-x;
      }
    }

  }

  /////

  a {
    @include paddingbox(32px, 32px);
  }

  a#create-screen {
    float: left;
    @include x1x2(0 0, '../img/icons/1x/tick-default.png', '../img/icons/2x/tick-default.png');
    &:hover {
      @include x1x2(0 0, '../img/icons/1x/tick-hover.png', '../img/icons/2x/tick-hover.png');
    }
  }

  a#abort-create-screen {
    float: right;
    @include x1x2(0 0, '../img/icons/1x/error-default.png', '../img/icons/2x/error-default.png');

    &:hover {
      @include x1x2(0 0, '../img/icons/1x/error-hover.png', '../img/icons/2x/error-hover.png');
    }
  }
}

.screen {
  @include clearfix;
  @include border-radius(4px);
  @include paddingbox(200px, 64px);
  @include rgba-background(rgba(255, 255, 255, 0.6));

  margin-right: $def_margin_unit / 2;

  &:nth-of-type(2n) {
    @include desktopClient {
    }

    @include iPodWebappPortrait {
      margin-right: 0;
    }

    @include iPodSafariPortrait {
      margin-right: 0;
    }

    @include iPodSafariLandscapeFullscrren {
      margin-right: 0;
    }

    @include iPodWebappLandscape {
      margin-right: 0;
    }
  }

  margin-bottom: $def_margin_unit / 2;
  float: left;
  cursor: pointer;

  //DEVICE
  @include desktopClient {
    @include paddingbox(200px, 64px);
  }

  @include iPodWebappPortrait {
    @include paddingbox(308px, 64px);
  }

  @include iPodSafariPortrait {
    @include paddingbox(308px, 64px);
  }

  @include iPodSafariLandscapeFullscrren {
    @include paddingbox(223px, 64px);
  }

  @include iPodWebappLandscape {
    @include paddingbox(231px, 64px);
  }

  @include iPodSafariLandscape {
    @include paddingbox(223px, 64px);
  }

  img {
    width: 64px;
    height: 64px;
    float: left;
    margin-right: $def_margin_unit;
    margin-left: -1px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url($backgroundImage);
  }

  h4 {
    margin-top: $def_margin_unit - 2;
    font-size: $small;
    letter-spacing: 0.06em;
    color: #000;
  }

  span {
    font-family: $font-light;
    font-size: $small;
    letter-spacing: 0.06em;
  }

  div.screenStats {
    @include clearfix;
    @include border-radius(2px);
    @include box-shadow(0px 0px 1px #333);

    overflow: hidden;
    background-color: #999;
    height: 4px;
    margin-left: 80px;
    margin-top: 6px;
    width: 112px;

    @include iPodWebappPortrait {
      width: 216px;
    }

    @include iPodSafariPortrait {
      width: 216px;
    }

    @include iPodSafariLandscapeFullscrren {
      width: 140px;
    }

    @include iPodWebappLandscape {
      width: 140px;
    }

    @include iPodSafariLandscape {
      width: 140px;
    }

    > div {
      float: left;
      height: 100%

    }

    > div.blue {
      background-color: $blue;
    }
    > div.turkis {
      background-color: $turkis;
    }
    > div.green {
      background-color: $green;
    }
    > div.yellow {
      background-color: $yellow;
    }
    > div.orange {
      background-color: $orange;
    }
    > div.red {
      background-color: $red;
    }
    > div.pink {
      background-color: $pink;
    }
    > div.grey {
      background-color: $grey;
    }
    > div.white {
      background-color: $white;
    }
  }
}

.screen.curent {
  @include rgba-background(rgba(255, 255, 255, 0.8));

  h4 {
    color: #000;
  }
}

.screen.removable {
  @include rgba-background($red_50);
  opacity: 0.5;
  span, h4 {
    color: $whiteFull;
  }
}

.screen.removable.do {
  opacity: 1;
}

.screen.curent.removable {
  display: none;
}