/******************************
 * Canvas                     *
 ******************************/

#perfectPixelCanvas{
  position:absolute;
  top:0;
  left:0;
  width:100%;

  &.--fixed{
    position:fixed;
    height:100%;
    overflow:hidden;
  }

  &.--responsive{
    .perfectPixelImage{
      >picture{
        display: block;
        >img{
          display: block;
          max-width: 100%;
          height: auto;
        }
      }
    }
  }
}

.perfectPixelImage{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  display:flex;
  
  &.halign-left {
    justify-content: left;
  }
  
  &.halign-center {
    justify-content: center;
  }
  
  &.halign-right {
    justify-content: right;
  }
}


/******************************
 * Toolbox                    *
 ******************************/

.ffPerfectPixelToolbox{
  position:fixed;
  top:10px;
  right:200px;
  z-index:1000;
}

.perfectPixelToolboxLayer{
  display:flex;
}

.perfectPixelToolboxLayerTool{
  display:inline-block;
  position:relative;
  padding:0 5px;
  height:14px;
  border-right:1px solid var(--widget_color_background_tint_light_15);
  border-left:1px solid rgba(255,255,255,0.25);
  font-weight:normal;

  &:first-child{
    padding-left:0;
    border-left:0;
  }

  &:last-child{
    padding-right:0;
    border-right:0;
    margin-left: auto;
  }
}

.ffPerfectPixelOpacitySlider{
  width:50px;
  border-top:1px solid var(--widget_color_background);
  border-bottom:1px solid rgba(255,255,255,0.1);
  position:relative;
  top:8px;
  margin-bottom:-6px;
  margin-left:3px;

  .ui-slider-handle{
    border-top:1px solid var(--widget_color_text);
    border-left:1px solid var(--widget_color_text);
    border-right:1px solid var(--widget_color_text);
    border-bottom:1px solid var(--widget_color_text);
    background-color:var(--widget_color_background);
    width:3px;
    height:10px;
    position:relative;
    top:-6px;
    margin-left:-3px;
    display:inline-block;
    border-radius:0;
    outline-width:0;
  }
}