:host {
  pointer-events: all;
  &.disable-mouse {
    pointer-events: none;
  }
}

.add-button-wrapper {
  display: flex;
  flex-direction: column;
  position: absolute;
  cursor: pointer;
}
.add-button-label {
  color: white;
  transform: translate(-50%, -35px);
  text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
}
.element-add-button {
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  position: absolute;
  min-height: 30px;
  min-width: 30px;
  height: 35px;
  width: 35px;
  max-height: 30px;
  max-width: 30px;
  background: #17253391;
  transform: translate(-15px, -15px);
  box-shadow: 0 0 0 5px rgb(0 0 0 / 7%);
  ::ng-deep co-icon {
    width: 16px;
    height: 16px;
    svg {
      fill: #FFF;
    }
  }
}

.element-bullet {
  pointer-events: none;
  position: absolute;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  cursor: default;
  background: #2c67ff;
  transform: translate(-5px, -5px);
}

/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
:host ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper {
  padding: 0;
  display: flex;
  line-height: 0px;
  align-items: center;
  justify-content: center;
}

:host ::ng-deep .mat-icon {
  height: 30px;
  width: 30px;
}
