@import 'xtend-library/src/core/note/_note.less';

/**
 * note
 */

.note {
  .font-sans-regular();
  .line-height-small();
  .note-title {
    .font-sans-semibold();
    .line-height-small();
    letter-spacing: 0;
    text-transform: none;
  }
  .note-list {
    .list-default();
  }
  // default options
  .note-medium();
}

// variant

.note-default {
  &:not(.note-background) {
    color: @text;
  }
  &.note-background {
    border-color: @shade-100;
    background: @shade-100;
    .text-default();
  }
}

.note-primary {
  &:not(.note-background) {
    color: @accent;
  }
  &.note-background {
    border-color: @accent;
    background: @accent;
    .text-inverse();
  }
  a {
    color: inherit;
  }
}

.note-success {
  &:not(.note-background) {
    color: @success;
  }
  &.note-background {
    border-color: @success;
    background: @success;
    .text-inverse();
  }
  a {
    color: inherit;
  }
}

.note-error {
  &:not(.note-background) {
    color: @error;
  }
  &.note-background {
    border-color: @error;
    background: @error;
    .text-inverse();
  }
  a {
    color: inherit;
  }
}

// size

.note-small {
  .margin(y, medium);
  .margin(y, layout);
  .font-tiny();
  .line-height-medium();
  &.note-background {
    padding: 1rem 1.5rem;
  }
  .note-list {
    .list-space(tiny);
  }
  .note-title {
    .spacing-tiny();
    font-size: 1.7rem;
  }
  .note-icon {
    font-size: 1.7rem;
  }
}

.note-medium {
  .margin(y, medium);
  .margin(y, layout);
  .font-small();
  .line-height-medium();
  &.note-background {
    padding: 1.5rem 2rem;
  }
  .note-list {
    .list-space(small);
  }
  .note-title {
    .spacing-small();
    font-size: 2rem;
  }
  .note-icon {
    font-size: 2rem;
  }
}

.note-large {
  .margin(y, medium);
  .margin(y, layout);
  .font-medium();
  .line-height-medium();
  &.note-background {
    padding: 2rem 2.5rem;
  }
  .note-list {
    .list-space(medium);
  }
  .note-title {
    .spacing-small();
    font-size: 2.5rem;
  }
  .note-icon {
    font-size: 3rem;
  }
}

// special

.note-background {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
}

.note-squared {
  border-radius: 0;
}

// animation

.note {
  .anim-x();
  &.inverse {
    .anim-x-inverse();
  }
}