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

.buttons{
  @include clearfix;

  display:block;
  height:auto;
  margin:0 auto;
  margin-top:$def_margin_unit;

  li.button{
    @include border-radius(4px);

    float:left;
    margin:0 ($def_margin_unit - 4) $def_margin_unit 0;

    // Landscape (ios) browser (fullscreen)
    @media screen and (max-height: 320px){
      margin:0 170px $def_margin_unit 0;
    }

    // Landscape (ios) webapp (non fullscreen)
    @media screen and (max-height: 308px){
      margin:0 170px $def_margin_unit 0;
    }

    a{
      text-decoration:none;
      color:$black / 10;
    }
  }

  li.button:last-of-type{
    margin-right:0px;
  }

  li.button.ok{
    //@include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/tick-default.png', '../img/icons/2x/tick-default.png');

    background-color:#F4AC00;

    &:hover{
     // @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/tick-hover.png', '../img/icons/2x/tick-hover.png');
    }
  }

  li.button.cancel{
   @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/error-default.png', '../img/icons/2x/error-default.png');

    background-color:$red;

    &:hover{
       @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/error-hover.png', '../img/icons/2x/error-hover.png');
    }
  }

  li.button.alert{
   @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/alert-default.png', '../img/icons/2x/alert-default.png');

    background-color:$red;

    &:hover{
       @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/alert-hover.png', '../img/icons/2x/alert-hover.png');
    }
  }

  li.button.trash{
   @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/bin-empty-default.png', '../img/icons/2x/bin-empty-default.png');

    background-color:$red;

    &:hover{
       @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/bin-full-hover.png', '../img/icons/2x/bin-full-hover.png');
    }
  }

  li.button.message{
     @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/mail-default.png', '../img/icons/2x/mail-default.png');

      background-color:$red;

      &:hover{
         @include x1x2(($def_margin_unit / 4) 3px, '../img/icons/1x/mail-hover.png', '../img/icons/2x/mail-hover.png');
      }
    }

  li.button.on{
    background-color:$blue;
    opacity:1;

    &:hover{
      opacity:0.5;
    }
  }

  li.button.off{
    background-color:$blue;

    opacity:0.5;

    &:hover{
      opacity:1;
    }
  }

}

.buttons.slim{

  li{
    width:150px;

    a{
      @include paddingbox(150px, 38px, 10px, 0, 0, 8px);

      display:block;
    }
  }
}

.buttons.wide{

  li{
    width:180px;

    a{
      @include paddingbox(180px, 38px, 10px, 0, 0, 8px);

      display:block;
     }
  }
}

.buttons.xwide{

  li{
    width:312px;

    a{
      @include paddingbox(312px, 38px, 10px, 0, 0, 8px);

      display:block;
     }
  }
}