@import '../settings';
@import '../colours';

.sequence-container {
  background-color: rgba($colour-platinum, 0.7);

  .action-bar {
    justify-content: flex-start;
  }

  .action-bar,
  .info-list {
    margin: $global-margin * 0.5;

    input {
      margin-block-end: 0;
    }
  }

  .sequence {
    font-family: $font-family-monospace;
    font-size: inherit;
    overflow-wrap: anywhere;

    counter-reset: sequence;

    &__chunk {
      display: inline-block;
      margin: $global-margin 0 $global-margin $global-margin;
      width: 10ch;
      position: relative;
      white-space: nowrap;

      &:not(:last-child),
      &--display-last {
        &:before {
          content: counter(sequence);
          counter-increment: sequence 10;

          position: absolute;
          top: -0.8em;
          right: 0;
          opacity: 0.5;
          font-weight: bold;
        }
      }

      &::after {
        content: '';

        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;

        transform-origin: left;
        /* squeeze to 10%, so that each shadow will have the width of 1ch */
        transform: scaleX(0.1);

        box-shadow: var(--box-shadow);
      }
    }
  }
}