//@use 'sass:map';

@if $note_style != 'disabled' {
  .main .note {
    $note-icons : $note_icons;
    $note-style : $note_style;

    border-radius: $note-border-radius;
    margin-bottom: 20px;
    padding: 1em;
    position: relative;

    @if $note-style == 'simple' {
      border: 1px solid $gainsboro;
      border-left-width: 5px;
    }

    @if $note-style == 'modern' {
      background: $whitesmoke;
      border: 1px solid transparent;
    }

    @if $note-style == 'flat' {
      background: lighten($gainsboro, 65%);
      border: initial;
      border-left: 3px solid $gainsboro;
    }

    summary {
      cursor: pointer;
      outline: 0;

      p {
        display: inline;
      }
    }

    h2, h3, h4, h5, h6 {
      border-bottom: initial;
      margin: 0;
      padding-top: 0;
    }

    p, ul, ol, table, pre, blockquote, img {
      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    @if $note-icons {
      &:not(.no-icon) {
        padding-left: 2.5em;

        &::before {
          font-size: 1.5em;
          left: .3em;
          position: absolute;
          top: calc(50% - 1em);
        }
      }
    }

    @each $type in $note-types {
      &.#{$type} {
        @if $note-style == 'flat' {
          background: map-get($note-bg, $type);
          @if $darkmode {
            @media (prefers-color-scheme: dark) {
              background: mix(map-get($note-bg, $type), $body-bg-color-dark, 10%);
            }
          }
        }

        @if $note-style == 'modern' {
          background: map-get($note-modern-bg, $type);
          border-color: map-get($note-modern-border, $type);
          color: map-get($note-modern-text, $type);

          a:not(.btn) {
            border-bottom-color: map-get($note-modern-text, $type);
            color: map-get($note-modern-text, $type);

            &:hover {
              border-bottom-color: map-get($note-modern-hover, $type);
              color: map-get($note-modern-hover, $type);
            }
          }
        }

        @if $note-style != 'modern' {
          border-left-color: map-get($note-border, $type);

          h2, h3, h4, h5, h6 {
            color: map-get($note-text, $type);
          }
        }

        @if $note-icons {
          &:not(.no-icon)::before {
            @include font-family-icons(map-get($note-icon, $type));

            @if $note-style != 'modern' {
              color: map-get($note-text, $type);
            }
          }
        }
      }
    }
  }
}
