@use 'code';

$gutter-background: #222a33 !default;
$gutter-row-color: #7b92a8 !default;
$gutter-row-padding: 0 .5em !default;
$gutter-row-background-active: #2b3742 !default;
$gutter-row-background-added: #213d45 !default;
$gutter-row-background-deleted: #3f353e !default;
$gutter-row-color-active: #a9c7e3 !default;
$gutter-row-color-added: #2abac4 !default;
$gutter-row-color-deleted: #f88792 !default;
$gutter-cell-padding: 0 .5em !default;


.rl {
  $root: &;

  &__gutter {
    background: $gutter-background;
    padding: code.$code-padding;

    &__row {
      color: $gutter-row-color;

      &.is-active {
        background: $gutter-row-background-active;
        color: $gutter-row-color-active;
      }

      &.is-added {
        background: $gutter-row-background-added;
        color: $gutter-row-color-added;
      }

      &.is-deleted {
        background: $gutter-row-background-deleted;
        color: $gutter-row-color-deleted;
      }

      span {
        padding: $gutter-cell-padding;
      }
    }
  }

  &__container {
    &.has-top-overlay {
      #{ $root }__gutter {
        padding: code.$code-overlay-padding;
      }
    }
  }
}