@import '~ng-devui/styles-var/devui-var.scss';

.layout {
  display: flex;
  align-items: stretch;
}

.side {
  border-right: 2px dashed $devui-dividing-line;
  padding-right: 10px;
  columns: 1;

  > div {
    margin: 8px 0;
  }
}

.main-content {
  width: 100%;
}

.add-zone {
  width: 140px;
  height: 120px;
}

.add-zone .new-widget {
  width: 100%;
  height: 100%;
  color: $devui-primary;
  text-align: center;
  border: 1px solid $devui-primary-line;
  background: $devui-primary-bg;
  padding: 16px;
  cursor: pointer;
  z-index: 1;

  .icon {
    font-size: 1.5em;
    margin-bottom: 20px;
  }
}

.trash-zone {
  width: 140px;
  height: 120px;
  color: $devui-danger;
  text-align: center;
  border: 1px solid $devui-danger-line;
  background: $devui-danger-bg;
  padding: 16px;

  .icon {
    font-size: 1.5em;
    margin-bottom: 8px;
  }
}

.setting {
  width: 50%;

  form {
    width: 350px;
  }
}

.config {
  width: 25%;

  > div:not(:first-of-type) {
    margin-bottom: 16px;
  }
}

.operation {
  width: 25%;
}

.title {
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
}

d-toggle {
  transform: scale(0.8);
  margin-right: 4px;
}
