import { css, themeVars } from "src/types/vars";

export const input = css`
  input,
  textarea,
  .ui.input input,
  // 排除可以选择的输入搜索框
  .ui.form input:not([type]):not(.search),
  .ui.form select,
  .ui.form textarea,
  .ui.form input[type="date"],
  .ui.form input[type="datetime-local"],
  .ui.form input[type="email"],
  .ui.form input[type="file"],
  .ui.form input[type="number"],
  .ui.form input[type="password"],
  .ui.form input[type="search"],
  .ui.form input[type="tel"],
  .ui.form input[type="text"],
  .ui.form input[type="time"],
  .ui.form input[type="url"] {
    padding: 8px 12px;
    border-radius: 8px; // 增加圆角
    border: 1px solid ${themeVars.color.light.border}; // 默认边框
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
    &:focus,
    &:focus-visible {
      background: ${themeVars.color.body} !important;
      border-radius: 8px; // 保持圆角
      border-color: ${themeVars.github.borderColor.accent.emphasis};
      // 向内部添加一个 1px 的边框
      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 3px rgba(253, 224, 71, 0.2); // 增强焦点效果
      outline: none;
      position: relative;
      top: -1px;
    }
    &:hover:not(:focus) {
      border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加轻微阴影
    }
  }

  .ui.input {
    height: 32px;
    border-radius: 8px; // 增加圆角
  }
  // 由于输入框高度, 需要输入框在表单中垂直居中
  // 管理员页面仓库搜索表单
  .ui.form#repo-search-form {
    align-items: center;
  }
  
  // 增强表单元素的整体样式
  .ui.form {
    .field {
      margin-bottom: 16px; // 增加字段间距
    }
    
    label {
      font-weight: 500; // 增加标签字体粗细
      margin-bottom: 6px; // 增加标签与输入框间距
      display: block;
    }
  }
`;