@use 'gjs_main_mixins';
@use 'gjs_vars';
@use 'gjs_category_general';

$frameAnimation: 0.35s ease !default;
$guide_pad: 5px !default;

.#{gjs_vars.$prefix} {
  &guide-info {
    position: absolute;

    &__content {
      position: absolute;
      height: 100%;
      display: flex;
      width: 100%;
      padding: 5px;
    }

    &__line {
      position: relative;
      margin: auto;

      &::before,
      &::after {
        content: '';
        display: block;
        position: absolute;
        background-color: inherit;
      }
    }

    &__y {
      padding: 0 $guide_pad;

      .#{gjs_vars.$prefix}guide-info {
        &__content {
          justify-content: center;
        }

        &__line {
          width: 100%;
          height: 1px;

          &::before,
          &::after {
            width: 1px;
            height: 10px;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto;
          }

          &::after {
            left: auto;
            right: 0;
          }
        }
      }
    }

    &__x {
      padding: $guide_pad 0;

      .#{gjs_vars.$prefix}guide-info {
        &__content {
          align-items: center;
        }

        &__line {
          height: 100%;
          width: 1px;

          &::before,
          &::after {
            width: 10px;
            height: 1px;
            left: 0;
            right: 0;
            top: 0;
            margin: auto;
            transform: translateX(-50%);
          }

          &::after {
            top: auto;
            bottom: 0;
          }
        }
      }
    }
  }

  &badge {
    white-space: nowrap;

    &__icon {
      vertical-align: middle;
      display: inline-block;
      width: 15px;
      height: 15px;

      svg {
        fill: currentColor;
      }
    }
    &__name {
      display: inline-block;
      vertical-align: middle;
    }
  }

  &frame-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;

    &--anim {
      transition:
        width $frameAnimation,
        height $frameAnimation;
    }

    &__top {
      transform: translateY(-100%) translateX(-50%);
      display: flex;
      padding: 5px 0;
      position: absolute;
      width: 100%;
      left: 50%;
      top: 0;

      &-r {
        margin-left: auto;
      }
    }

    &__left {
      position: absolute;
      left: 0;
      transform: translateX(-100%) translateY(-50%);
      height: 100%;
      top: 50%;
    }

    &__bottom {
      position: absolute;
      bottom: 0;
      transform: translateY(100%) translateX(-50%);
      width: 100%;
      left: 50%;
    }

    &__right {
      position: absolute;
      right: 0;
      transform: translateX(100%) translateY(-50%);
      height: 100%;
      top: 50%;
    }

    &__icon {
      width: 24px;
      cursor: pointer;

      > svg {
        fill: currentColor;
      }
    }
  }
}

.#{gjs_vars.$app-prefix} {
  &padding-v,
  &fixedpadding-v {
    &-top {
      width: 100%;
      top: 0;
      left: 0;
    }
    &-right {
      right: 0;
    }
    &-bottom {
      width: 100%;
      left: 0;
      bottom: 0;
    }
    &-left {
      left: 0;
    }
  }
}

.#{gjs_vars.$cv-prefix}canvas {
  box-sizing: border-box;
  width: calc(100% - var(--gjs-left-width));
  height: calc(100% - var(--gjs-canvas-top));
  bottom: 0;
  overflow: hidden;
  z-index: 1;
  position: absolute;
  left: 0;
  top: var(--gjs-canvas-top);

  &-bg {
    background-color: rgba(0, 0, 0, 0.15);
  }

  &.#{gjs_vars.$cui-cls} {
    width: 100%;
    height: 100%;
    top: 0;
  }

  &#{gjs_main_mixins.gjs-is(grab)},
  &#{gjs_main_mixins.gjs-is(grabbing)} {
    .#{gjs_vars.$cv-prefix}canvas__frames {
      pointer-events: none; // Need this in multi-frame mode
    }
  }

  &__frames {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__spots {
    position: absolute;
    pointer-events: none;
    z-index: 1;
  }

  .#{gjs_vars.$app-prefix}ghost {
    display: none;
    pointer-events: none;
    background-color: #5b5b5b;
    border: 2px dashed #ccc;
    position: absolute;
    z-index: 10;

    @include gjs_main_mixins.opacity(0.55);
  }

  .#{gjs_vars.$app-prefix}highlighter,
  .#{gjs_vars.$app-prefix}highlighter-sel {
    position: absolute;
    outline: 1px solid var(--gjs-color-blue);
    outline-offset: -1px;
    pointer-events: none;
    width: 100%;
    height: 100%;
  }

  .#{gjs_vars.$app-prefix}highlighter-warning {
    outline: 3px solid var(--gjs-color-yellow);
  }

  .#{gjs_vars.$app-prefix}highlighter-sel {
    outline: 2px solid var(--gjs-color-blue);
    outline-offset: -2px;
  }

  ##{gjs_vars.$app-prefix}tools,
  .#{gjs_vars.$app-prefix}tools {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    outline: none;
    z-index: 1;
  }
  /* Always place the tools above the highlighter */
  ##{gjs_vars.$app-prefix}tools {
    z-index: 2;
  }

  /* This simulate body behaviour */
  // > div:first-child {
  //   background-color: #fff;
  //   position: relative;
  //   height: 100%;
  //   overflow: auto;
  //   width: 100%;
  // }
}

.#{gjs_vars.$cv-prefix}canvas * {
  box-sizing: border-box;
}

.#{gjs_vars.$app-prefix}frame {
  outline: medium none;
  height: 100%;
  width: 100%;
  border: none;
  margin: auto;
  display: block;
  transition:
    width $frameAnimation,
    height $frameAnimation;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.#{gjs_vars.$app-prefix}toolbar {
  position: absolute;
  background-color: var(--gjs-color-blue);
  white-space: nowrap;
  color: white;
  z-index: 10;
  top: 0;
  left: 0;
}

.#{gjs_vars.$app-prefix}toolbar-item {
  width: 26px;
  padding: 5px;
  cursor: pointer;
  display: inline-block;

  svg {
    fill: currentColor;
    vertical-align: middle;
  }
}

.#{gjs_vars.$app-prefix}resizer-c {
  @extend .#{gjs_vars.$app-prefix}no-pointer-events;

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.#{gjs_vars.$app-prefix}margin-v-el,
.#{gjs_vars.$app-prefix}padding-v-el,
.#{gjs_vars.$app-prefix}fixedmargin-v-el,
.#{gjs_vars.$app-prefix}fixedpadding-v-el {
  @extend .#{gjs_vars.$app-prefix}no-pointer-events;

  @include gjs_main_mixins.opacity(0.1);

  position: absolute;
  background-color: yellow;
}

.#{gjs_vars.$app-prefix}fixedmargin-v-el,
.#{gjs_vars.$app-prefix}fixedpadding-v-el {
  @include gjs_main_mixins.opacity(0.2);
}

.#{gjs_vars.$app-prefix}padding-v-el,
.#{gjs_vars.$app-prefix}fixedpadding-v-el {
  background-color: navy;
}

.#{gjs_vars.$app-prefix}resizer-h {
  pointer-events: all;
  position: absolute;
  border: 3px solid var(--gjs-color-blue);
  width: 10px;
  height: 10px;
  background-color: #fff;
  margin: var(--gjs-handle-margin);
}

.#{gjs_vars.$app-prefix}resizer-h-tl {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.#{gjs_vars.$app-prefix}resizer-h-tr {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.#{gjs_vars.$app-prefix}resizer-h-tc {
  top: 0;
  margin: var(--gjs-handle-margin) auto;
  left: 0;
  right: 0;
  cursor: ns-resize;
}

.#{gjs_vars.$app-prefix}resizer-h-cl {
  left: 0;
  margin: auto var(--gjs-handle-margin);
  top: 0;
  bottom: 0;
  cursor: ew-resize;
}

.#{gjs_vars.$app-prefix}resizer-h-cr {
  margin: auto var(--gjs-handle-margin);
  top: 0;
  bottom: 0;
  right: 0;
  cursor: ew-resize;
}

.#{gjs_vars.$app-prefix}resizer-h-bl {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

.#{gjs_vars.$app-prefix}resizer-h-bc {
  bottom: 0;
  margin: var(--gjs-handle-margin) auto;
  left: 0;
  right: 0;
  cursor: ns-resize;
}

.#{gjs_vars.$app-prefix}resizer-h-br {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}

.#{gjs_vars.$pn-prefix}panel {
  .#{gjs_vars.$app-prefix}resizer-h {
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    opacity: 0;
    transition: opacity 0.25s;

    &:hover {
      opacity: 1;
    }
  }

  .#{gjs_vars.$app-prefix}resizer-h-tc,
  .#{gjs_vars.$app-prefix}resizer-h-bc {
    margin: 0 auto;
    width: 100%;
  }

  .#{gjs_vars.$app-prefix}resizer-h-cr,
  .#{gjs_vars.$app-prefix}resizer-h-cl {
    margin: auto 0;
    height: 100%;
  }
}

.#{gjs_vars.$app-prefix}resizing .#{gjs_vars.$app-prefix}highlighter,
.#{gjs_vars.$app-prefix}resizing .#{gjs_vars.$app-prefix}badge {
  display: none !important;
}

.#{gjs_vars.$app-prefix}resizing-tl * {
  cursor: nwse-resize !important;
}

.#{gjs_vars.$app-prefix}resizing-tr * {
  cursor: nesw-resize !important;
}

.#{gjs_vars.$app-prefix}resizing-tc * {
  cursor: ns-resize !important;
}

.#{gjs_vars.$app-prefix}resizing-cl * {
  cursor: ew-resize !important;
}

.#{gjs_vars.$app-prefix}resizing-cr * {
  cursor: ew-resize !important;
}

.#{gjs_vars.$app-prefix}resizing-bl * {
  cursor: nesw-resize !important;
}

.#{gjs_vars.$app-prefix}resizing-bc * {
  cursor: ns-resize !important;
}

.#{gjs_vars.$app-prefix}resizing-br * {
  cursor: nwse-resize !important;
}

// .btn-cl {
//   @include gjs_main_mixins.opacity(0.3);

//   font-size: 25px;
//   cursor: pointer;

//   &:hover {
//     @include gjs_main_mixins.opacity(0.7);
//   }
// }