src/assets/styles/thumbnailButton.scss
.pdl-thumbnail {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0;
  padding: 0;
  height: 32px;
  width: 32px;
  top: calc((100% - 32px) * var(--pdl-btn-top-percent) / 100 + var(--pdl-btn-top-px));
  left: calc((100% - 32px) * var(--pdl-btn-left-percent) / 100 + var(--pdl-btn-left-px));

  border: none;
  border-radius: 4px;

  overflow: hidden;
  white-space: nowrap;
  user-select: none;

  font-family: system-ui;
  font-size: 13px;
  font-weight: bold;

  color: #262626;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);

  z-index: 1;
  pointer-events: auto;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
  }

  & > svg {
    position: absolute;
    width: 85%;
    height: 85%;
    fill: currentColor;
    stroke: currentColor;
  }

  & > span {
    opacity: 0;
    transition: opacity 0.2s;

    &.show {
      opacity: 1;
    }
  }

  // 画廊页按钮
  // top, left, right, bottom only affect `position: sticky` even if
  // the sticky element's parent has `position: absolute`;
  :host([data-type='gallery']) & {
    --pdl-sticky-safe-area-top: 0px;
    --pdl-sticky-safe-area-bottom: 0px;

    position: sticky;
    top: var(--pdl-sticky-safe-area-top);
    left: 0px;
    right: 0px;
  }

  :host([data-type='gallery'].bottom) & {
    top: calc(100% - 32px - var(--pdl-sticky-safe-area-bottom));
  }

  :host([data-type='gallery'].pixiv) & {
    --pdl-sticky-safe-area-top: 40px;
    --pdl-sticky-safe-area-bottom: 48px;
  }

  :host([data-type='gallery'].nijie) & {
    --pdl-sticky-safe-area-top: 36px;
    --pdl-sticky-safe-area-bottom: 70px;
  }

  // pixiv个人收藏
  :host([data-type='pixiv-my-bookmark']) & {
    top: calc(
      (100% - 32px) * var(--pdl-btn-pixiv-bookmark-top-percent) / 100 +
        var(--pdl-btn-pixiv-bookmark-top-px)
    );
    left: calc(
      (100% - 32px) * var(--pdl-btn-pixiv-bookmark-left-percent) / 100 +
        var(--pdl-btn-pixiv-bookmark-left-px)
    );
  }

  // pixiv历史记录
  :host([data-type='pixiv-history']) & {
    z-index: auto; // 避免覆盖“相关图片”
  }

  // pixiv presentation
  :host([data-type='pixiv-presentation']) & {
    position: fixed;
    top: 50px;
    right: 20px;
    left: auto;
  }

  // pixiv toolbar
  :host([data-type='pixiv-toolbar']) & {
    position: relative;
    top: auto;
    left: auto;
    color: inherit;
    background-color: transparent;
    z-index: auto;
  }

  // pixiv manga viewer
  :host([data-type='pixiv-manga-viewer']) & {
    top: 80%;
    right: 4px;
    left: auto;
  }

  // yande browse
  :host([data-type='yande-browse']) & {
    top: 320px;
    right: 4px;
    left: auto;
  }

  :host([data-type='nijie-illust']) & {
    display: inline-flex;
    position: static;
    height: 44px;
    width: 44px;
    top: auto;
    left: auto;
    border-radius: 8px;
    margin: 0px 8px;
    vertical-align: top;

    & > svg {
      width: 70%;
      height: 70%;
    }
  }

  :host([data-type='rule34vault-post-action']) & {
    position: relative;
    top: auto;
    left: auto;

    color: inherit;
    background-color: inherit;

    width: 4em;
    height: 36px;

    & > svg {
      height: 28px;
      width: 28px;
    }

    &:hover {
      filter: brightness(1.2);
    }
  }

  :host([data-status]) & {
    color: #16a34a;
  }

  :host([data-status='error']) & {
    color: #ef4444;
  }
}
