@use "../../wc";

$colors: (
  red: var(--zn-color-red-600),
  blue: var(--zn-color-blue-500),
  orange: var(--zn-color-orange-500),
  yellow: var(--zn-color-yellow-400),
  indigo: var(--zn-color-indigo-400),
  violet: var(--zn-color-violet-600),
  green: var(--zn-color-green-500),
  pink: var(--zn-color-pink-400),
  gray: var(--zn-color-gray-500)
);

:host {
  display: block;
}

.note {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-wrap: nowrap;
  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
  gap: var(--zn-spacing-3x-small);
  border-left: 3px solid transparent;

  &__header {
    display: flex;
    justify-content: space-between;

    &__caption {
      font-weight: var(--zn-font-weight-semibold);
      font-size: var(--zn-font-size-medium);
      color: rgb(var(--zn-text-heading));
    }

    &__date {
      font-size: var(--zn-font-size-small);
    }

    &__end {
      display: flex;
      gap: var(--zn-spacing-small);
    }
  }

  &__body-container {
    position: relative;
    max-width: var(--zn-container-md);
  }

  &__body {
    display: block;
  }

  &__toggle {
    margin-top: var(--zn-spacing-2x-small);
  }

  &__toggle__btn {
    background: none;
    border: none;
    color: var(--zn-color-primary-500, currentColor);
    font: inherit;
    cursor: pointer;
    padding: 0;
  }

  &__body--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--note-collapse-lines, 0);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @each $name, $color in $colors {
    &--#{'' + $name} {
      .note__header__caption {
        color: hsl(from #{$color} h s 40%);
      }

      border-left: 3px solid #{$color};
      background-color: hsla(from #{$color} h s l / 0.02);
    }
  }

  &__footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--zn-spacing-x-small);
  }
}