@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');

$tablet: 750px;
$mobile: 550px;

$font-main: 'Rajdhani', sans-serif, Arial;
$font-size-small: 12px;
$font-size-normal: 14px;
$font-size-big: 30px;
$black-faded-0: #0006;
$gray-button-hover: #F3F3F2;

$dot-size: 1px;
$dot-space: 5px;

/*body {
  @include user-select(none);
}

header {
  width: calc(100% - 40px);
  padding: 20px;
  font-family: $font-main;
  font-size: $font-size-big;

  a {
    color: darkslategray;
  }
}

button {
  @include appearance(none);
  background: none;
}

.gallery {
  img {
    width: 100%;
    height: 20vw;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    @include transition(0.25s);

    &:hover {
      box-shadow: 0 0 4px 0 $gray-button-hover;
    }
  }
}*/

.camedit {
  @import "~reset-css";
  @import "presets";
  @import "cropper.min.css";

  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  display: none;
  width: 100%;
  height: 100%;
  background: $black-faded-0;

  &.active {
    display: block;
  }


  button {
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    @include transition(0.25s);

    &:hover {
      background: $gray-button-hover;
    }
  }

  label {
    display: block;
  }

  p, label {
    font-family: $font-main;
    text-align: center;
    text-transform: uppercase;
  }

  &.full-screen {
    width: 100vw;
    height: 100vw;
  }

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    border-radius: 5px;
    @include transform(translate(-50%, -50%));
    background: white;

    @media screen and (max-width: $tablet) {
      width: 500px;
    }

    @media screen and (max-width: $mobile) {
      width: 300px;
      height: 400px;
      overflow: scroll;
    }
  }

  .close {
    display: block;
    float: right;
    width: 30px;
    cursor: pointer;
  }

  .image-view {
    position: relative;
    width: 50%;
    height: unset;
    margin-top: 0;

    @media screen and (max-width: $tablet) {
    }

    @media screen and (max-width: $mobile) {
      width: 100%;
      height: 275px;
      margin-top: 50px;
    }
  }

  .tools {
    width: 40%;
    margin-right: 20px;

    @media screen and (max-width: $mobile) {
      width: 100%;
      margin-top: 5px;
      margin-right: 0;
    }
  }

  .loading-view {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
    width: 100%;
    height: 100%;
    background: $black-faded-0;

    &.active {
      display: block;
    }

    img {
      position: relative;
      width: 30px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

  }

  .camedit-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
  }

  .rotate {
    display: block;
    width: 40px;
  }

  input {
    display: block;
  }

  input[type="range"]{ /* bar */
    @include appearance(none);
    display: block;
    width: calc(100% - 12px);
    border-radius: 5px;
    height: 8px;
    border: solid black 1px;
    background: white;
    outline: none;
    @include transition(0.25s);
  }

  input[type='range']::-webkit-slider-thumb { /* slider */
    @include appearance(none !important);
    background-color: $gray-button-hover;
    border: 1px solid black;
    height: 20px;
    width: 20px;
    cursor: pointer;
    outline: none;
    @include transition(0.25s);
  }

  .cropper-container {
    position: absolute;
    top: 0;
    left: 0;
  }

  .cropper-modal {
    background-color: white!important;
  }

  .cropper-bg {
    background:
            linear-gradient(90deg, $gray-button-hover ($dot-space - $dot-size), transparent 1%) center,
            linear-gradient($gray-button-hover ($dot-space - $dot-size), transparent 1%) center, $black-faded-0;
    background-size: $dot-space $dot-space;
  }

  .rotate {
    cursor: pointer;
    @include transition(0.25s);

    &:hover {
      @include filter(opacity(50%));
    }
  }

  .img-container, .cropper-hide {
    /* Never limit the container height here */
    max-width: 100%;
  }

  .img-container img, .cropper-hide {
    /* This is important */
    width: 100%;
  }

}