.protyle {
  font-family: var(--b3-font-family);
  overflow-x: hidden;
  background-color: var(--b3-theme-background);
  position: relative;
  max-height: 100%;
  min-height: 104px;
  display: flex;
  flex-direction: column;

  &-preview {
    flex: 1;
    user-select: text;
    min-width: 1px;
    overflow: auto;
    background-color: var(--b3-theme-background);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    &__action {
      text-align: center;
      padding: 10px;
      background-color: var(--b3-theme-surface);

      button {
        background-color: var(--b3-theme-surface);
        color: var(--b3-theme-on-surface);
        line-height: 20px;
        border: 0;
        margin: 0 10px;
        cursor: pointer;
        padding: 0 7px;
        font-size: 12px;

        &.protyle-preview__action--current,
        &:hover {
          color: var(--b3-theme-primary);
          background-color: var(--b3-theme-surface);
        }

        &:focus {
          outline: none;
        }

        svg {
          fill: currentColor;
          height: 15px;
          width: 15px;
          vertical-align: middle;
        }
      }
    }

    & > .b3-typography {
      padding: 8px 16px;
      margin: 0 auto;
      overflow: auto;
      width: 100%;
      box-sizing: border-box;
    }
  }

  &-upload {
    position: absolute;
    height: 3px;
    left: 0;
    top: -2px;
    transition: var(--b3-transition);
    background-color: var(--b3-theme-primary);
  }
}