.copy-to-clipboard {
  $component-name: ".copy-to-clipboard";
  $component-name-not-selector: "copy-to-clipboard";
  $copy-to-clipboard-icon-spacing: -4;
  $copy-to-clipboard-confirm-marker-size: -4;

  @mixin message($icon, $background: "background-secondary") {
    @include set-colors($background);
    @include set-font(-1, "single");
    font-family: $font-string;
    text-shadow: none;
    white-space: nowrap;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: spacing(-5, $times: -2, $add: line-height("single", $include-calc: false, $times: -1), $subtract: spacing($copy-to-clipboard-confirm-marker-size));

    //clever clever: https://medium.com/front-end-weekly/absolute-centering-in-css-ea3a9d0ad72e
    left: 50%;
    transform: translateX(-50%);

    padding: spacing(-5) spacing(-3);
    box-shadow: $shadow-style-front color("shadow");

    @include icon-style {
      @include set-icon($icon);
      margin-right: spacing(-5);
    }

    &::after {
      content: '';
      position: absolute;
      bottom: spacing($copy-to-clipboard-confirm-marker-size, $times: -1, $add: 1px);
      width: 0;
      height: 0;
      border-style: solid;
      border-width: spacing($copy-to-clipboard-confirm-marker-size) spacing($copy-to-clipboard-confirm-marker-size) 0 spacing($copy-to-clipboard-confirm-marker-size);
      border-color: color($background) transparent transparent transparent;
    }
  }

  position: relative;
  display: block;

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child:not(#{$component-name}__button) {
    margin-bottom: 0;
  }

  //style for entire thing as a button
  @at-root {
    button.#{$component-name-not-selector} {
      text-align: left;

      & #{$component-name}__hint {
        display: none;
      }

      &:focus,
      &:hover {
        color: color("foreground-theme-hover");
      }

      &:active {
        color: color("foreground-theme");
      }

      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }

      //only show hint on none-touch devices, and only show it, if the item isn't in confirm mode or it has already been copied. (We do not want the hint to reappear, if the button is stil focused or hovered after the confirm)
      @include none-touch {
        &:not(#{$component-name}--done):not(#{$component-name}--confirm) {
          &:focus,
          &:hover {
            #{$component-name}__hint {
              @include message("copy");
            }
          }
        }
      }
    }
  }


  //style for when using a seperate button - e.g. when the content that is to be copied is interactive (link or button)
  &:not(button) {
    padding-right: spacing($copy-to-clipboard-button-padding, $subtract: line-height("single", $times: -1, $include-calc: false), $add: spacing($copy-to-clipboard-button-spacing));
  }

  &__button {
    flex: 0 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    $size: spacing($copy-to-clipboard-button-padding, $times: 2, $add: line-height("single", $include-calc: false));
    width: $size;
    height: $size;
    border-radius: 50%;
    margin-top: spacing($copy-to-clipboard-button-padding, $times: -1);
    margin-bottom: spacing($copy-to-clipboard-button-padding, $times: -1);
    margin-right: spacing($copy-to-clipboard-button-padding, $times: -1);
    margin-left: spacing($copy-to-clipboard-icon-spacing);
    overflow: hidden;
    color: color("foreground-secondary");

    @include icon-style {
      @include set-icon("copy");
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: $size;
      text-align: center;
    }

    &:focus,
    &:hover {
      box-shadow: $shadow-style-front color("shadow");
      @include set-colors("interactive");
      outline: none;
    }

    &:active {
      box-shadow: $shadow-style-back color("shadow");
      @include set-colors("interactive");
      outline: none;
    }

    &:focus-visible {
      outline: $outline-width solid color("utility-focus");
      outline-offset: $outline-offset;
    }
  }

  &__this {
    position: relative;

    #{$component-name}--confirm & {
      outline: $width-border solid color("utility-confirm");
      outline-offset: $width-border;
      border-radius: $width-border;
    }

    &__confirm-message {
      @include message("confirm-circle", "utility-confirm-background");
    }
  }
}