@if $css-variable-enabled {
  $note-block-border-radius: var(--note-block-border-radius);
  $note-block-line-width: var(--note-block-line-width);
  $note-block-margin: var(--note-block-margin);
  $note-block-padding: var(--note-block-padding);
  $primary-transition: var(--primary-transition);
}

.#{$prefix}note {
  background-color: var(--note-block-bg-color);
  overflow: hidden;
  position: relative;
  border-radius: $note-block-border-radius;
  margin: $note-block-margin;
  padding: $note-block-padding;
  transition: background-color $primary-transition;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--note-block-line-color);
    width: $note-block-line-width;
  }

  @each $name, $color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name}:after {
        background-color: $color !important;
      }
    }
  }
}