lila/ui/analyse/css/_analyse.free.scss

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

$label-width: 5ch;

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

    position: relative;
  }

  .name {
    flex: 0 0 $label-width;
    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;

      &.is-error {
        background: $m-bad_bg--mix-20;
        box-shadow: 0 0 13px 2px $m-bad_bg--mix-20;
      }
    }
  }

  .bottom-item {
    position: absolute;
    top: 100%;
    visibility: hidden;
    opacity: 0;

    @include transition;

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

  .bottom-error {
    left: calc($label-width + 1ch);
    margin-top: 0.5em;
    font-size: 90%;
    color: $c-bad;

    &::before {
      margin-right: 0.4em;
    }

    &.is-error {
      visibility: visible;
      opacity: 1;
    }
  }

  .bottom-action {
    @extend %box-radius-bottom;
    @include inline-end(0);

    text-align: right;
  }

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

.mselect {
  font-size: 1.5em;

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

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

.jump-960 {
  margin-top: 1em;
  margin-bottom: 1em; // col1
  .control-960 {
    margin-top: 0.7em;

    button {
      margin-left: 1em;
    }
  }
}