@use 'sass:color';

.ls-code-block {
  width: 100%;

  &__controls {
    display: flex;
    gap: 10px;
  }

  &__code {
    margin-top: $sp * 4;
    margin-bottom: $sp * 4;

    > pre {
      clear: both;
      color: $color-dark;
      position: relative;
      border: set-border();
      white-space: pre-line;
      word-break: break-all;

    }

    > pre[rel]::before {
      color: $color-white;
      content: attr(rel);
      top: 0;
      left: 0;
      position: absolute;
      text-indent: 15px;
      height: 100%;
      writing-mode: vertical-lr;
      text-transform: uppercase;
      background: $color-primary;
    }
  }

  &__ribbon {
    padding-left: 0;
    padding-bottom: 0;

    &::before {
      display:none;
    }

    &--active {
      min-height: 85px;
      padding-left: 6 * $sp;

      &::before {
        display: block;
      }
    }
  }
}