@import "utils";

.conversation {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-end;

  > *:not(:last-child) {
    margin-bottom: var(--conversation-padding-v);
  }

  .conversation__header {
    > h2 {
      // Disable line wrapping
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .conversation__messages {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    > *:not(:last-child) {
      margin-bottom: calc(var(--conversation-padding-v) / 2);
    }
  }

  .conversation__empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    margin: var(--conversation-padding-v) 0;

    > *:not(:last-child) {
      margin-bottom: calc(var(--conversation-padding-v) * 2);
    }

    .conversation__empty__header {
      align-items: center;
      display: flex;
      flex-direction: column;
      text-align: center;

      > img {
        height: calc(var(--font-size) * 8);
      }
    }

    .conversation__empty__doc {
      background-color: var(--background-bold);
      border-radius: var(--radius);
      display: grid;
      grid-gap: 1em;
      padding: 2em;
      place-items: flex-start;

      // Small width
      @media (max-width: $media--large) {
        grid-template-columns: auto auto;
      }

      // Full width
      @media (min-width: $media--large) {
        grid-template-columns: auto auto auto auto auto auto;
      }

      div {
        > *:not(:last-child) {
          margin-bottom: 0.5em;
        }
      }
    }
  }

  .conversation__input {
    background: linear-gradient(0deg, var(--background) 66%, transparent 100%);
    padding-bottom: var(--conversation-padding-v);

    // Stays at the bottom
    bottom: 0;
    position: sticky;
    z-index: 900;
  }

  // Delimit the content to limit wrapping
  .conversation__input__block {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    // Add spaces blocks
    &:not(:last-child) {
      margin-bottom: calc(var(--conversation-padding-h) / 3);
    }

    // Add spaces around buttons
    > *:not(:last-child) {
      margin-right: calc(var(--conversation-padding-h) / 3);
    }

    // Make the input take all the available space
    > textarea {
      resize: vertical;
      width: 100%;
      z-index: 1;  // Abose nearby elements

      &:not(:disabled):not([disabled]) {
        &:active,
        &:focus {
          box-shadow: 0 0 1.25rem var(--border-active);
          transition-property: box-shadow outline;
          transition-duration: 0.125s;
        }
      }
    }
  }
}
