@import 'bootstrap/custom-bootstrap-variables';
@import 'mixins/type';

.note {
  border: 1px $gray-300 solid;
  border-left-width: 4px;
  padding: $spacer calc(#{$spacer} * 1.5);
  background-color: $gray-100;
  @include font-smoothing;
  
  > *:first-child {
    margin-top: 0;
  }
  
  > *:last-child {
    margin-bottom: 0;
  }
  
  * + &,
  & + * {
    margin-top: calc(#{$spacer} * 2);
  }
}

.note--primary {
  border-left: 4px solid $primary;
}

.note--success {
  border-left: 4px solid $success;
}

.note--info {
  border-left: 4px solid $info;
}

.note--warning {
  border-left: 4px solid $warning;
}

.note--danger {
  border-left: 4px solid $danger;
}