.cp-structure {
  display: none;
  position: fixed;
  margin: 0;
  padding: 8px;
  list-style: none;
  font-size: 11px;
  z-index: 1033;
  min-width: 280px;
  max-height: 80%;
  scrollbar-width: none;
  outline: none;
  background: var(--cp-strucutre-bg);
  box-shadow: 0 0 3px var(--cp-strucutre-bg);
  color: var(--text-color-contrast);

  &::-webkit-scrollbar {
    display: none;
  }

  .dropdown-menu-top {
    top: inherit;
    bottom: 100%;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    padding: 0;
  }

  .cp-structure-container + [data-template-type] > li > .cp-structure-template [data-action-click^=moveUp], [data-container-id] [data-template-type]:last-child > li > .cp-structure-template [data-action-click^=moveDown] {
    display: none;
  }
}

.cp-structure-row {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 1px;

  > {
    div {
      flex: 1;
    }

    .fa {
      width: 18px;
      text-align: center;
    }
  }
}

.cp-structure-actions > .fa {
  width: 18px;
  text-align: center;
}

.cp-structure-row {
  .cp-structure-actions {
    flex: 0;
    white-space: nowrap;
    visibility: hidden;
  }

  &:hover .cp-structure-actions {
    visibility: visible;
  }

  .cp-structure-actions .dropdown-menu {
    padding: 0;
  }
}

.cp-structure-header {
  cursor: move;

  .cp-structure-actions {
    visibility: visible;
    padding: 4px;
    margin: -4px 5px -4px -5px;
    cursor: pointer;

    .dropdown-menu {
      top: 10px !important;
      left: -4px !important;
    }
  }

  .cp-structure-text {
    font-weight: 600;
  }
}

.cp-structure-container .cp-structure-text {
  font-weight: 600;
}

.cp-structure-template .cp-structure-text, .cp-structure-container .cp-structure-text {
  padding: 0 8px;
  cursor: default;
}

.cp-structure-row {
  .cp-structure-action {
    font-size: 14px;
    visibility: hidden;
    cursor: pointer;
  }

  &:hover .cp-structure-action, .cp-structure-action.fa-plus {
    visibility: visible;
  }

  .fa-circle, .fa-circle-o {
    font-size: 70%;
  }
}

.cp-structure-template .fa-circle {
  color: var(--cp-container-item-color);
}

.cp-structure-container .fa-circle-o {
  color: var(--cp-container-color);
}

.cp-structure-header .cp-structure-actions:hover, .cp-structure-template:hover, .cp-structure-container:hover, .cp-structure-active {
  border-radius: 4px;
  background: var(--cp-strucutre-bg-active);
  transition: background 0.3s;
}

.cp-structure-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1031;
}