/* Days Journal
 * -------------------------------------------------------------------------- */

.journal {
  .input {
    padding-top: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    overflow-x: hidden;
    &:focus-within { box-shadow: none; }
  }

  trix-editor {
    border-radius: 0;
    overflow-y: scroll;
    overflow-x: hidden;

    &:empty::before { color: var(--color-txt--very-subtle); }
  }

  .trix-button-group--file-tools {
    display: inline-block !important;
    padding-top: 5px;
  }

  .trix-button--icon-attach::before { background-image: url("/assets/icons/trix/trix_attach-1c51cc9e.svg"); }
  .attachment--file { margin-left: 2px !important; }
  .rich-text--input .trix-button-row { border-radius: 3rem; }
  .trix-content { font-family: var(--font-family); }
}

.journal__dialog {
  padding: var(--half-space);
}

.journal__content,
.journal__composer {
  padding-top: 2rem !important;
  width: 100% !important;
  margin: auto 0 !important;
  padding-bottom: 0 !important;
}

.journal__composer--dialog {
  @media (min-width: 60em) {
    width: 64rem !important
  }

  @media (min-width: 40em) {
    height: 70dvh;
    min-width: 64rem;
  }

  @media (max-width: 39.95em) {
    height: 13rem;
    width: 90dvw !important;
  }
}

.journal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-end: var(--half-space);
  border-block-end: 1px solid var(--color-border--light);
}

.journal__autosave {
  margin: 0;
  animation: appear 100ms both;
  animation-delay: 1s;
}

form[aria-busy="true"] .journal__autosave {
  display: none;
}

.journal__save-actions {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--quarter-space);
}

.journal__button {
  border: none;
  width: 1.8em;
  min-width: 1.8em;
  height: 1.8em;
  transition: transform 150ms ease;

  &::before { filter: var(--colorize-ink); }
  &:hover { transform: scale(1.2); }
}

.journal__button--filled {
  &::before { filter: none !important; }
}

.journal__date-widget {
  .journal__date-form {
    position: absolute;
    top: 1.25rem;
    left: 2rem;
  }

  .duet-date__input-wrapper {
    display: none;
  }

  .duet-date__day:not(.is-disabled) {
    background-color: var(--color-bg--surface-glint);
  }

  @media (max-width: 39.95em) {
    .duet-date__dialog-content {
      right: 0;
      inset-inline-start: 2rem;
    }
  }
}