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

export const footer = css`
  .page-footer {
    background-color: ${themeVars.color.footer}; // 使用主题色
    border-top: 0;
    color: ${themeVars.color.text.light.num1};
    font-size: 12px;
    gap: 32px;
    justify-content: center;
    padding: 24px 0 40px 0; // 增加顶部内边距
    border-radius: 12px 12px 0 0; // 增加圆角
    margin-top: 32px; // 增加顶部外边距
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
    > .left-links {
      gap: 8px; // 增加间距
      > a {
        color: ${themeVars.color.text.light.num1};
        padding: 4px 8px; // 增加内边距
        border-radius: 8px; // 增加圆角
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        &:hover {
          color: ${themeVars.color.primary.self};
          background-color: ${themeVars.color.hover.self};
          transform: translateY(-1px); // 轻微上移效果
        }
      }
      > strong {
        font-weight: 400;
      }
    }
    > .right-links {
      gap: 16px;
      > .ui.dropdown {
        font-size: 12px;
        padding: 4px 8px; // 增加内边距
        border-radius: 8px; // 增加圆角
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        &:hover {
          color: ${themeVars.color.primary.self};
          background-color: ${themeVars.color.hover.self};
          transform: translateY(-1px); // 轻微上移效果
        }
      }
      > a {
        border-left: 0;
        color: ${themeVars.color.text.light.num1};
        padding: 4px 8px; // 增加内边距
        margin-left: 0;
        border-radius: 8px; // 增加圆角
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        &:hover {
          color: ${themeVars.color.primary.self};
          background-color: ${themeVars.color.hover.self};
          transform: translateY(-1px); // 轻微上移效果
        }
      }
    }
  }
  
  // 移动端优化
  @media (max-width: 767.98px) {
    .page-footer {
      flex-direction: column; // 垂直排列
      gap: 16px; // 调整间距
      padding: 16px 0 32px 0; // 调整内边距
      > .left-links,
      > .right-links {
        flex-wrap: wrap; // 允许换行
        justify-content: center; // 居中对齐
        gap: 8px; // 调整间距
      }
    }
  }
`;