:host {
  display: flex;
  justify-content: center;
  align-items: center;

  contain: size;

  /**
   * @prop --width: The default width. Will be overwritten if component is modified
   */
  width: var(--width);
  /**
   * @prop --height: The default height. Will be overwritten if component is modified
   */
  height: var(--height);

  /**
   * @prop --rotate: The default rotate angle. Will be overwritten if component is rotated
   * @default 0deg
   */
  transform: rotate(var(--rotate, 0deg));

  position: absolute;

  /**
   * @prop --top: The default top position. Will be overwritten if component is modified
   */
  top: var(--top);
  /**
   * @prop --left: The default left position. Will be overwritten if component is modified
   */
  left: var(--left);

  /**
   * @prop --deckgo-drr-user-select: The user selection on the host component
   * @default none
   */
  user-select: var(--deckgo-drr-user-select, none);
}

:host(.text) {
  contain: layout;
}

:host(.selected.draggable:not(.drag)) {
  cursor: move;
}

:host(.selected) {
  /**
   * @prop --deckgo-drr-border: A border around the component if selected
   * @default 1px solid #3880ff
   */
  outline: var(--deckgo-drr-border, 1px solid #3880ff);
}

::slotted(*) {
  width: 100%;
  height: 100%;

  user-select: var(--user-select, none);
  touch-action: none;
  pointer-events: var(--pointer-events, none);
}

div.anchor {
  position: absolute;

  /**
   * @prop --deckgo-drr-anchor-width: The default width of an anchor
   * @default 16px
   */
  width: var(--deckgo-drr-anchor-width, 16px);

  /**
   * @prop --deckgo-drr-anchor-height: The default height of an anchor
   * @default 16px
   */
  height: var(--deckgo-drr-anchor-height, 16px);

  /**
   * @prop --deckgo-drr-anchor-padding-desktop: The default padding of an anchor on desktop
   * @default 16px
   */
  padding: var(--deckgo-drr-anchor-padding-desktop, 16px);

  > div {
    width: 100%;
    height: 100%;

    /**
     * @prop --deckgo-drr-anchor-border-radius: The default border radius of an anchor
     * @default 50%
     */
    border-radius: var(--deckgo-drr-anchor-border-radius, 50%);

    /**
     * @prop --deckgo-drr-anchor-background: The background of an anchor
     * @default #3880ff
     */
    background: var(--deckgo-drr-anchor-background, #3880ff);

    /**
     * @prop --deckgo-drr-anchor-border: The border of an anchor
     */
    border: var(--deckgo-drr-anchor-border);
  }

  &.top {
    top: 0;

    &.end {
      cursor: ne-resize;
      transform: translate(50%, -50%);
    }

    &.start {
      cursor: nw-resize;
      transform: translate(-50%, -50%);
    }
  }

  &.end {
    right: 0;
  }

  &.bottom {
    bottom: 0;

    &.end {
      cursor: se-resize;
      transform: translate(50%, 50%);
    }

    &.start {
      cursor: sw-resize;
      transform: translate(-50%, 50%);
    }
  }

  &.start {
    left: 0;
  }
}

div.border {
  position: absolute;

  &.top,
  &.bottom {
    /**
     * @prop --deckgo-drr-anchor-width: The rotate block anchor width
     * @default 16px
     */
    width: calc(100% - var(--deckgo-drr-anchor-width, 16px));
    height: 16px;
  }

  &.end,
  &.start {
    top: 50%;

    /**
     * @prop --deckgo-drr-anchor-height: The rotate block anchor height
     * @default 16px
     */
    height: calc(100% - var(--deckgo-drr-anchor-height, 16px));
    width: 16px;
  }

  &.top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    cursor: n-resize;
  }

  &.end {
    right: 0;
    transform: translate(50%, -50%);

    cursor: e-resize;
  }

  &.bottom {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);

    cursor: s-resize;
  }

  &.start {
    left: 0;
    transform: translate(-50%, -50%);

    cursor: w-resize;
  }
}

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

  /**
     * @prop --deckgo-drr-rotate-anchor-width: The rotate block anchor action width
     * @default 24px
     */
  height: var(--deckgo-drr-rotate-anchor-width, 24px);
  /**
     * @prop --deckgo-drr-rotate-anchor-height: The rotate block anchor action height
     * @default 32px
     */
  width: var(--deckgo-drr-rotate-anchor-height, 32px);

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

    cursor: crosshair;

    /**
     * @prop --deckgo-drr-rotate-anchor-action-width: The rotate block anchor action width
     * @default 16px
    */
    width: var(--deckgo-drr-rotate-anchor-action-width, 16px);

    /**
     * @prop --deckgo-drr-rotate-anchor-action-height: The rotate block anchor action height
     * @default 16px
    */
    height: var(--deckgo-drr-rotate-anchor-action-height, 16px);

    /**
     * @prop --deckgo-drr-rotate-anchor-action-border-radius: The rotate block anchor action border radius
     * @default 50%
    */
    border-radius: var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);

    /**
     * @prop --deckgo-drr-rotate-anchor-action-background: The rotate block anchor action background
    */
    background: var(--deckgo-drr-rotate-anchor-action-background);

    /**
     * @prop --deckgo-drr-rotate-anchor-action-border: The rotate block anchor action border
     * @default 1px solid #3880ff
    */
    border: var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff);
  }

  div.presentation {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);

    /**
     * @prop --deckgo-drr-rotate-anchor-presentation-height: The rotate block anchor presentation block height
     * @default calc(100% - 16px - 1px)
    */
    height: var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));

    /**
     * @prop --deckgo-drr-rotate-anchor-presentation-border-right: The rotate block anchor presentation block border right
     * @default 1px solid #3880ff
    */
    border-right: var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff);
  }
}

@media (hover: none) and (pointer: coarse) {
  div.anchor {
    /**
     * @prop --deckgo-drr-anchor-padding-mobile: The default padding of an anchor on touch devices
    */
    padding: var(--deckgo-drr-anchor-padding-mobile);
  }

  div.border {
    &.top,
    &.bottom {
      height: 4px;
    }

    &.end,
    &.start {
      width: 4px;
    }
  }
}
