@layer components {
  /* app/assets/stylesheets/documents.css */
  
  .doc-bg {
    background-color: var(--color-grey-050);
    padding: 2rem 0;
    min-height: 100vh;
  
    .doc-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 1rem;
    }
  
    .doc-content-wrapper {
    }
  
    .doc-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 1.5rem;
  
      .doc-title,
      .doc-title-input {
        width: 100%;
        font-family: 'Roboto', sans-serif;
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
  
      .doc-title-input {
        background: transparent;
        border: none;
        border-bottom: 1px dashed transparent;
        outline: none;
        transition: border-color 0.2s;
  
        &:hover {
          border-bottom-color: var(--color-grey-100);
        }
  
        &:focus {
          border-bottom-color: var(--color-grey-400);
        }
      }
  
      .doc-toolbar {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 0.5rem;
  
        .menu-link {
          margin-right: 1rem;
          font-size: 0.9rem;
          color: var(--color-blue-custom);
          text-decoration: none;
          white-space: nowrap;
  
          &:hover {
            text-decoration: underline;
          }
        }
  
        .word-count {
          margin-left: auto;
          font-size: 0.9rem;
          color: var(--color-text-medium);
          white-space: nowrap;
  
          .word-count-long {
            display: inline;
          }
  
          .word-count-short {
            display: none;
          }
  
          @media (max-width: 600px) /* custom breakpoint */ {
            .word-count-long {
              display: none;
            }
  
            .word-count-short {
              display: inline;
            }
          }
        }
      }
    }
  
    .paper-content {
      background: var(--color-white);
      border: 1px solid var(--color-grey-100);
      box-shadow: 0 2px 10px rgb(var(--rgb-black) / 0.05);
      border-radius: 4px;
      padding: 2rem;
      margin-bottom: 2rem;
      max-height: 90vh;
      overflow: auto;
    }
  
    .content-textarea {
      width: 100%;
      border: none;
      resize: none;
      outline: none;
      background: transparent;
      font-family: Georgia, serif;
      font-size: 1rem;
      line-height: 1.6;
      max-height: 90vh;
      overflow: auto;
  
      &::placeholder {
        color: var(--color-grey-200);
      }
    }
  }
}