@use '../../global/scss/tools' as nsw;

$heading-link: '.nsw-heading-link';

.js-copy-headings {
  $heading-link-touch-size: nsw.rem(44px);
  $heading-link-gap: nsw.rem(8px);

  * + .nsw-heading-link {
    margin-top: nsw.rem(48px);
  }

  .nsw-heading-link {
    display: flex;
    align-items: flex-start;
    gap: $heading-link-gap;

    &__heading {
      min-width: 0;
      margin: 0;
    }

    &__button {
      position: relative;
      min-width: $heading-link-touch-size;
      min-height: $heading-link-touch-size;
      margin: nsw.rem(-4px) 0 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      flex-shrink: 0;
      box-sizing: border-box;
      line-height: 1;
      cursor: pointer;
      opacity: 1;
      pointer-events: auto;

      &:hover,
      &:focus {
        background-color: var(--nsw-hover);
      }

      &:hover #{$heading-link}__tooltip,
      &:focus #{$heading-link}__tooltip,
      &.is-copied #{$heading-link}__tooltip {
        opacity: 1;
      }

      &.is-tooltip-hidden #{$heading-link}__tooltip,
      &.is-tooltip-hidden:hover #{$heading-link}__tooltip,
      &.is-tooltip-hidden:focus #{$heading-link}__tooltip {
        opacity: 0;
      }

      &.is-copied #{$heading-link}__tooltip-icon {
        display: block;
      }
    }

    &__button-icon {
      display: block;
      margin: 0;
      line-height: 1;
      font-size: nsw.rem(20px);
      color: var(--nsw-link);
    }

    &__tooltip {
      position: absolute;
      bottom: calc(100% + #{nsw.rem(8px)});
      left: 50%;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      gap: nsw.rem(4px);
      white-space: nowrap;
      padding: nsw.rem(4px) nsw.rem(8px);
      border-radius: var(--nsw-border-radius);
      background-color: var(--nsw-grey-01);
      color: var(--nsw-text-light);
      opacity: 0;
      pointer-events: none;

      @include nsw.font-size('xs');
    }

    &__tooltip-icon {
      display: none;
      margin: 0;
      color: var(--nsw-text-light);
      font-size: nsw.rem(16px);
      line-height: 1;
    }
  }
}

@include nsw.breakpoint('lg') {
  .js-copy-headings {
    .nsw-heading-link {
      &__button {
        margin-top: nsw.rem(-2px);
        opacity: 0;
        pointer-events: none;

        &:hover,
        &:focus {
          opacity: 1;
          pointer-events: auto;
        }
      }

      &:hover > #{$heading-link}__button,
      &:focus-within > #{$heading-link}__button {
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
}

@include nsw.breakpoint('lg') {
  @media (prefers-reduced-motion: no-preference) {
    .js-copy-headings .nsw-heading-link {
      &__button {
        transition: opacity 0.15s ease-in-out;
      }

      &__tooltip {
        transition: opacity 0.15s ease-in-out;
      }
    }
  }
}