:host {
  display: block;

  height: 100%;
  width: 100%;

  overflow: hidden;

  ::slotted([slot="words"]) {
    display: none;
  }

  div.placeholder:not(:empty) {
    display: none;
  }

  div.placeholder,
  svg.words {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

:host([editable]) {
  div.placeholder:empty:not(:focus):after {
    /**
     * @prop --deckgo-word-cloud-empty-text: Place holder in case editable is set to true
     * @default "Click to add your words"
     */
    content: var(--deckgo-word-cloud-empty-text, "Click to add your words");
  }
}

:host(.deckgo-word-cloud-edit) {
  ::slotted([slot="words"]) {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }

  svg.words {
    display: none;
  }

  div.placeholder {
    display: none;
  }
}

div.deckgo-word-cloud-container {
  height: 100%;
  position: relative;

  div.placeholder {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
  }
}

::slotted([slot="words"]) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  white-space: pre-wrap;

  width: 100%;
  height: 100%;

  text-align: center;

  max-height: 100%;
  overflow: scroll;
}
