export const baseButton = `
.ui.button {
    min-height: 30px;
    font-weight: 500;
    padding: 9px 16px;
    &.ui {
      gap: 8px;
    }
  }
  .ui.button:not(.primary):not(.red) svg {
    color: var(--color-text-light-1);
  }
  /* 主色调按钮 */
  .ui.primary {
    &.button,
    /* 按钮组, PR 里的压缩合并按钮 */
    &.buttons .button {
      color: var(--github-button-primary-fgColor-rest);
background-color: var(--github-button-primary-bgColor-rest);
border-color: var(--github-button-primary-borderColor-rest);
box-shadow: var(--github-shadow-resting-small);
      &:hover {
        color: var(--github-button-primary-fgColor-rest);
background-color: var(--github-button-primary-bgColor-hover);
border-color: var(--github-button-primary-borderColor-hover);
      }
      &:active {
        color: var(--github-button-primary-fgColor-rest);
background-color: var(--github-button-primary-bgColor-hover);
border-color: var(--github-button-primary-borderColor-hover);
        background-color: var(--github-button-primary-bgColor-active);
      }
      svg {
        color: inherit;
      }
    }
    /* 按钮组整体有阴影 */
    &.buttons {
      box-shadow: var(--github-shadow-resting-small);
      .button {
        /* 按钮组里的按钮无阴影 */
        box-shadow: none;
      }
    }
  }
  /* 主色调基本按钮和普通按钮一样 */
  /* 作者的关注按钮 */
  .ui.basic.primary.button {
    background-color: var(--color-button);
    color: var(--color-text);
    border-color: var(--color-light-border);
    box-shadow: none;
    &:hover {
      background-color: var(--color-hover);
      color: var(--color-text);
      border-color: var(--color-light-border);
    }
  }
  /* 普通按钮边框色不变 */
  .ui.basic.button,
  /* 仓库点星等数字标签按钮边框色不变 */
  .ui.labeled.button > .label {
    &:hover {
      border-color: var(--color-light-border);
    }
  }

  /* 普通按钮激活时背景色 */
  .ui.button:active,
  .ui.basic.buttons .button:active,
  .ui.basic.button:active,
  .ui.basic.buttons .active.button,
  .ui.basic.active.button,
  .ui.basic.buttons .active.button:hover,
  .ui.basic.active.button:hover {
    background-color: var(--github-button-default-bgColor-active);
  }
`;

export const redButton = `
.ui.red.button,
  .ui.basic.red.buttons .button,
  .ui.basic.red.button {
    color: var(--github-button-danger-fgColor-rest);
    background-color: var(--github-button-danger-bgColor-rest);
    /* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */
    border-color: var(--color-light-border);
    &:hover {
      color: var(--github-button-danger-fgColor-hover);
      background-color: var(--github-button-danger-bgColor-hover);
      border-color: var(--github-button-danger-borderColor-hover);
      box-shadow: var(--github-shadow-resting-small);
    }
    &:active {
      color: var(--github-button-danger-fgColor-hover);
      background-color: var(--github-button-danger-bgColor-active);
      border-color: var(--github-button-danger-borderColor-hover);
      box-shadow: var(--github-shadow-resting-small);
    }
  }
`;

export const fixButtonHeight = `
/* 修复一些主色调或者其他小按钮的高度避免过高 */
  .ui.small.buttons .button,
  .ui.ui.ui.ui.small.button {
    min-height: 26px;
    height: 32px;
  }
  /* 修复仓库页仓库操作按钮高度对齐和修正 */
  .repo-button-row .ui.button {
    min-height: 32px;
    height: 32px;
  }
  /* 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高 */
  .repo-header {
    .ui.ui.ui.ui.small.compact.button,
    .ui.labeled.button > .label {
      height: 28px;
      min-height: 28px;
      line-height: 1.5;
    }
  }
  .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
  .ui.ui.ui.ui.tiny.button {
    min-height: 20px;
  }
`;

export const fixButton = `
/* 修复关注&派生 hover 意外点亮右侧 label 左边框 */
  .ui.ui.ui.ui.small.button {
    z-index: 0;
  }
  /* 代码复制按钮 */
  .ui.button.code-copy {
    padding: 4px 6px;
    min-height: 28px;
  }
`;

export const stylesheet = [baseButton, redButton, fixButtonHeight, fixButton].join("\n\n");