@import 'variables';
@import 'theme-colors';

.note {
  padding: 1rem;
  display: flex;
  font-size: 13px;
  border-left: 3px solid;
  border-radius: $default-radius;
  background-color: var(--base-color);

  .note-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .note-description {
    margin-bottom: 0;
  }

  &.note-primary {
    border-color: $primary-color;
    background-color: rgba($primary-color, 0.05);

    .note-icon {
      color: $primary-color;
    }
  }

  &.note-success {
    border-color: $success-color;
    background-color: rgba($success-color, 0.05);

    .note-icon {
      color: $success-color;
    }
  }

  &.note-info {
    border-color: $info-color;
    background-color: rgba($info-color, 0.05);

    .note-icon {
      color: $info-color;
    }
  }

  &.note-warning {
    border-color: $warning-color;
    background-color: rgba($warning-color, 0.05);

    .note-icon {
      color: $warning-color;
    }
  }

  &.note-danger {
    border-color: $danger-color;
    background-color: rgba($danger-color, 0.05);

    .note-icon {
      color: $danger-color;
    }
  }

  &.note-secondary {
    border-color: $secondary-color;
    background-color: rgba($secondary-color, 0.05);

    .note-icon {
      color: $secondary-color;
    }
  }

  &.note-light {
    border-color: $light-color;
    background-color: rgba($light-color, 0.05);

    .note-icon {
      color: $light-color;
    }
  }
}

// SCSS for RTL Layout
[dir="rtl"] {
  .note {
    border-left: 0;
    border-right: 3px solid;

    &.note-primary {
      border-color: $primary-color;
    }

    &.note-success {
      border-color: $success-color;
    }

    &.note-info {
      border-color: $info-color;
    }

    &.note-warning {
      border-color: $warning-color;
    }

    &.note-danger {
      border-color: $danger-color;
    }

    &.note-secondary {
      border-color: $secondary-color;
    }

    &.note-light {
      border-color: $light-color;
    }
  }
}