/* free analysis on /analysis */
@import 'analyse.base';

.copyables {
  .pair {
    @extend %flex-center;

    position: relative;

    .action {
      @extend %box-radius-bottom;

      position: absolute;
      #{$end-direction}: 0;
      top: 100%;
      text-align: right;
      visibility: hidden;
      opacity: 0;

      @include transition;
    }

    &:focus-within .action {
      visibility: visible;
      opacity: 1;
    }
  }

  .name {
    flex: 0 0 5ch;
    font-weight: bold;
    color: $c-font-dim;
  }

  .copyable {
    flex: 1 1 auto;
  }

  .pgn {
    margin: 1em 0;

    textarea {
      min-height: 6em;
      white-space: pre-wrap;
      overflow-x: hidden;
    }
  }
}

.mselect {
  font-size: 1.5em;

  label span,
  a {
    @extend %flex-center-nowrap;

    &::before {
      line-height: 0;
    }
  }
}

/* free analysis on /analysis */
@import 'analyse.base';

.copyables {
  .pair {
    @extend %flex-center;

    position: relative;

    .action {
      @extend %box-radius-bottom;

      position: absolute;
      #{$end-direction}: 0;
      top: 100%;
      text-align: right;
      visibility: hidden;
      opacity: 0;

      @include transition;

      @media (prefers-reduced-motion: reduce) {
        // Keep the button visible until the click registered
        transition: all 1ms !important;
      }
    }

    textarea:focus ~ .action,
    .action:focus-visible {
      visibility: visible;
      opacity: 1;
    }
  }

  .name {
    flex: 0 0 5ch;
    font-weight: bold;
    color: $c-font-dim;
  }

  .copyable {
    flex: 1 1 auto;
  }

  .pgn {
    margin: 1em 0;

    textarea {
      min-height: 6em;
      white-space: pre-wrap;
      overflow-x: hidden;
    }
  }
}

.mselect {
  font-size: 1.5em;

  label span,
  a {
    @extend %flex-center-nowrap;

    &::before {
      line-height: 0;
    }
  }
}

Make pgn import button vanish immediately after clicking again
Make pgn import button vanish immediately after clicking again

but still keep it around long enough for the click to register
when using reduced motion. And also keep it visible when focusing
it via the keyboard (:focus-visible).
