$line-side-padding: 1.5em !default;
$line-side-padding-gutter: 1em !default;
$line-border-left-width: 2px !default;
$line-background-active: #28333d !default;
$line-background-added: #213d45 !default;
$line-background-deleted: #3f353e !default;
$line-border-left-color-active: #5fbef5 !default;
$line-border-left-color-added: #235a63 !default;
$line-border-left-color-deleted: #61444d !default;

.rl {
  $root: &;

  &__line {
    border-left: $line-border-left-width solid transparent;
    box-sizing: border-box;
    padding: 0 $line-side-padding 0 calc( #{ $line-side-padding } - #{ $line-border-left-width } );

    &.is-active {
      background: $line-background-active;
      border-left-color: $line-border-left-color-active;
    }

    &.is-added {
      background: $line-background-added;
      border-left-color: $line-border-left-color-added;
    }

    &.is-deleted {
      background: $line-background-deleted;
      border-left-color: $line-border-left-color-deleted;
    }
  }

  &__container {
    &.has-gutter {
      #{ $root }__line {
        padding: 0 $line-side-padding-gutter 0 calc( #{ $line-side-padding-gutter } - #{ $line-border-left-width } );
      }
    }
  }
}