@import "../global/_variables";

scui-editor-element {
  width: 174px;
  height: 174px;
  position: relative;
  cursor: move;
  display: inline-flex;
  margin: 10px;
}

.scui-editor-element {
  background-color: $main_2;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: relative;

  .insert-el {
    position: absolute;
    z-index: 10;
    top: 32px;
    left: 12px;
    font-size: 22px;
    cursor: pointer;
    display: none;

    &.i-bot {
      top: auto;
      bottom: 32px;
    }
  }

  .handle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: transparent;
  }

  &:hover {
    outline: 8px solid $main_3;
    .insert-el {
      display: block;
    }
  }

  .scui-editor-element-label {
    margin-top: auto;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 14px;
    color: $blank_1;
  }

  .scui-editor-element-icon {
    font-size: 60px;
    color: $blank_1;
    margin-top: 44px;
  }
}

.gu-mirror .scui-editor-element {
  // outline: 8px solid $prim_5 !important;

  .scui-editor-element-label, .scui-editor-element-icon {
    color: $prim_5;
  }
}

scui-editor-element.gu-transit {
  width: 100% !important;
  margin: 0 0 16px 0 !important;
}

.gu-transit .scui-editor-element {
  background-color: $main_5 !important;
  color: $main_5 !important;
  opacity: 1 !important;
  width: 100% !important;
  outline: none !important;

  * {
    visibility: hidden !important;
  }
}