@use '../../../../style/globals';
@use '../../../../style/colors';

.notes-editor {
  .notes-toolbar {
    // toolbar extension & alignment
    margin-top: 1em;
    mat-toolbar {
      @extend %toolbar;
      border-radius: 4px;
      .light & {
        background: colors.color(primary);
        color: colors.on-color(primary);
      }
      .dark & {
        background: colors.color(primary);
        color: colors.on-color(primary);
      }
    }

    // hide sorting option selection/down arrow
    .control.hide-selected-value {
      .mat-mdc-select-value,
      .mat-mdc-select-arrow-wrapper {
        display: none;
      }
    }

    // search input field
    .search-field {
      padding-right: 12px;
      font-size: 14px;
      line-height: 1.125;
      height: 75%;

      .mat-mdc-form-field-subscript-wrapper {
        display: none; // remove bottom padding used for hint
      }
      .mat-mdc-form-field-flex {
        height: -webkit-fill-available;
      }
      .mat-mdc-text-field-wrapper {
        background-color: transparent !important;
        padding-left: 0 !important;
      }
      .mat-mdc-input-element {
        color: colors.color(light) !important;
      }
      .mdc-text-field--filled:not(.mdc-text-field--disabled) {
        .mdc-line-ripple::before,
        .mdc-line-ripple::after {
          border-bottom-color: colors.color(light);
        }
      }
      .mat-mdc-form-field-infix {
        padding: 0 !important;
        margin: auto;
        min-height: unset;
        --mdc-filled-text-field-input-text-placeholder-color: #b2b2b2;
        --mdc-filled-text-field-caret-color: color(light);
      }
    }
  }

  .sticky-note {
    margin-top: 12px;

    .mat-mdc-form-field-subscript-wrapper {
      display: none;
    }
    .mat-mdc-form-field {
      width: 100%;
    }
    .mdc-line-ripple::before,
    .mdc-line-ripple::after {
      display: none;
    }

    // replace dark theme box-shadow with a border
    .dark & {
      &.edit-outline {
        border-color: colors.border-color(primary);
      }
      box-shadow: none;
      border: solid 1px;
      border-color: colors.border-color(dark);
    }

    .light & {
      // update box shadow to primary color
      &.edit-outline {
        box-shadow:
          0px 2px 1px -1px colors.color(primary),
          0px 1px 1px 0px colors.color(primary),
          0px 1px 3px 0px colors.color(primary);
      }
    }

    // note header styles
    .mat-mdc-input-element {
      cursor: pointer;
    }
    &.edit-outline .mat-mdc-input-element {
      cursor: text !important;
    }
    .mat-mdc-card-header {
      cursor: pointer;
      padding: 0 0 0 16px;

      .mat-mdc-form-field-infix {
        padding: 0 !important;
        min-height: unset !important;
      }
    }
    .mat-mdc-text-field-wrapper {
      background-color: transparent !important;
      padding: 0;
    }
    .mat-mdc-card-header-text {
      width: 100%;
    }
    .mat-mdc-card-header .mat-mdc-input-element {
      font-size: 20px;
      font-weight: 500;
      margin: 12px 0;
      overflow: hidden;
      &:read-only {
        cursor: pointer;
      }
    }
    .note-subtitle {
      @extend .text-label;
      margin-bottom: 12px;
      font-size: 13px;
    }

    // note control buttons
    .header-controls {
      display: flex;
      flex-direction: row;
      margin: auto;
    }

    // style textarea and markdown consistently
    .mat-mdc-card-content {
      padding: 0 16px;
      .markdown {
        font-size: 16px;
      }
    }
  }
}
