// PisellExport - 导出触发器样式
// 设计规范：边框 #D0D5DD，文案 #344054，主色 #7F56D9，阴影 0px 1px 2px rgba(16,24,40,0.05)，圆角 8px

.pisell-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;

  /* 三尺寸统一：图标 20×20px，与文案间距 8px（由根 gap 控制） */
  .pisell-export-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  .pisell-export-icon {
    font-size: 20px !important;
    width: 20px;
    height: 20px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
  }

  .pisell-export-label {
    font-weight: 600;
    white-space: nowrap;
  }

  // ----- 尺寸（与 Figma 一致：row1=small, row2=medium, row3=large）-----
  // Button 形态 padding + 文案 line-height：small 20 / medium 20 / large 24
  &--small {
    padding: 8px 14px;
    .pisell-export-label {
      font-size: 14px;
      line-height: 20px;
    }
  }

  &--medium {
    padding: 10px 16px;
    .pisell-export-label {
      font-size: 14px;
      line-height: 20px;
    }
  }

  &--large {
    padding: 12px 20px;
    .pisell-export-label {
      font-size: 16px;
      line-height: 24px;
    }
  }

  // Icon 形态：Figma small/medium p-[10px]，large p-[14px]
  &--icon.pisell-export--small {
    padding: 10px;
  }
  &--icon.pisell-export--medium {
    padding: 10px;
  }
  &--icon.pisell-export--large {
    padding: 14px;
  }

  // ----- 视觉类型：primary -----
  &--primary {
    border-color: #7f56d9;
    color: #344054;
    background: #fff;

    &:hover:not(.pisell-export--disabled) {
      border-color: #7f56d9;
      background: #f9f5ff;
      color: #475467;
    }
    &:focus-visible {
      box-shadow: 0 0 0 2px rgba(127, 86, 217, 0.2);
    }
    &:active:not(.pisell-export--disabled) {
      background: #f4ebff;
    }
  }

  &--primary .pisell-export-icon {
    color: #7f56d9;
  }

  &--primary:hover:not(.pisell-export--disabled) .pisell-export-icon {
    color: #7f56d9;
  }

  // ----- 默认类型 hover / focus / active -----
  &:hover:not(.pisell-export--disabled):not(.pisell-export--primary) {
    background: #f2f4f7;
    border-color: #d0d5dd;
  }
  &:focus-visible:not(.pisell-export--primary) {
    box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.08);
  }
  &:active:not(.pisell-export--disabled):not(.pisell-export--primary) {
    background: #e4e7ec;
  }

  // ----- 禁用 -----
  &--disabled {
    cursor: not-allowed;
    background: #f2f4f7;
    border-color: #e4e7ec;
    color: #98a2b3;
    box-shadow: none;
  }

  &--disabled .pisell-export-icon {
    color: #98a2b3;
  }

  &--primary.pisell-export--disabled {
    background: #f9f5ff;
    border-color: #e9d7fe;
    color: #98a2b3;
  }
  &--primary.pisell-export--disabled .pisell-export-icon {
    color: #98a2b3;
  }
}
