:host {
  article {
    padding: 0;
    &:focus-within {
      outline: var(--pos-input-focus-outline);
    }

    .tiptap {
      border: none;
      outline: none;
    }

    line-height: 1.5;
    pos-image {
      --max-width: 100%;
    }

    header {
      position: sticky;
      background-color: var(--pos-background-color);
      border-bottom: var(--size-px) solid var(--pos-border-color);
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      overflow: hidden;
      z-index: var(--layer-1);
      top: 0;
      padding: var(--size-1);
      flex-direction: row;
      justify-content: flex-end;
      button {
        background: var(--pos-primary-color);
        color: var(--pos-primary-text-color);
        outline: none;
        border: none;
        border-radius: var(--radius-xs);
        display: inline-flex;
        gap: var(--size-1);
        justify-content: center;
        align-items: center;
        height: var(--size-8);
        flex-shrink: 1;

        &:focus {
          outline: var(--pos-input-focus-outline);
        }

        &:hover {
          filter: brightness(110%);
          box-shadow: var(--shadow-md);
        }
      }
      .status {
        display: flex;
        align-content: center;
        align-items: center;
        gap: var(--size-1);
        font-size: var(--scale-00);

        &.pending {
          animation: pending-fade 1s ease forwards;
        }

        &.success {
          animation: success-flash 2s ease forwards;
        }

        &.error {
          animation: error-flash 2s ease infinite;
        }

        &.saving {
          animation: saving-flash 2s ease infinite;
        }
      }
    }

    .content {
      padding: var(--size-4);

      pre {
        code {
          display: block;
          padding: var(--size-4);
          overflow-x: auto;
          background-color: var(--color-black);
          font-family: monospace;
          color: var(--color-white);
          line-height: 1.6;
          border-radius: var(--radius-lg);
        }
      }

      blockquote {
        border-left: var(--size-1) solid var(--pos-primary-color);
        margin-left: var(--size-4);
        padding-left: var(--size-4);
      }
    }
  }
}

@keyframes pending-fade {
  0% {
    opacity: 0;
    color: var(--pos-subtle-text-color);
  }
  100% {
    opacity: 1;
    color: var(--pos-primary-color);
  }
}

@keyframes success-flash {
  0% {
    opacity: 0;
    color: var(--pos-subtle-text-color);
  }
  50% {
    opacity: 1;
    color: var(--color-green-500);
  }
  100% {
    opacity: 1;
    color: var(--pos-subtle-text-color);
  }
}

@keyframes error-flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    color: var(--color-red-500);
  }
  100% {
    opacity: 0;
  }
}

@keyframes saving-flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    color: var(--pos-primary-color);
  }
  100% {
    opacity: 0;
  }
}