/**
 * 自定义工具条样式 - 解决图标拥挤和位置问题
 * 
 * @package PixelShare
 * @author 猫大大
 * @version 1.0.0
 */

/* 修改工具条容器样式 */
.floating-toolbar {
    gap: 15px; /* 增加按钮之间的间距 */
}

/* 修改工具条项目样式 */
.floating-toolbar .toolbar-item {
    width: 45px; /* 稍微减小按钮尺寸 */
    height: 45px;
}

/* 修改工具条项目图标样式 */
.floating-toolbar .toolbar-item i {
    font-size: 18px; /* 稍微减小图标尺寸 */
    margin-bottom: 3px; /* 增加图标与文字的间距 */
}

/* 修改工具条项目文字样式 */
.floating-toolbar .toolbar-item span {
    font-size: 9px; /* 减小文字尺寸 */
}

/* 修复工具条项目悬停效果 - 确保文字为白色 */
.floating-toolbar .toolbar-item:hover {
    background-color: var(--theme-color, #ff6800);
    color: #fff !important; /* 强制文字为白色 */
}

/* 确保深色模式下悬停效果文字也为白色 */
[data-theme="dark"] .floating-toolbar .toolbar-item:hover,
.dark-theme .floating-toolbar .toolbar-item:hover {
    color: #fff !important;
}

/* 移动端适配 - 将位置从居中改为底部 */
@media (max-width: 767px) {
    .floating-toolbar {
        top: auto; /* 取消垂直居中 */
        bottom: 20px; /* 设置距离底部的距离 */
        transform: none; /* 移除垂直居中的transform */
    }
    
    /* 当存在底部导航栏时的位置调整 */
    body.has-mobile-tabbar .floating-toolbar {
        bottom: 80px; /* 保持在底部导航栏上方 */
    }
}