/**
 * @file docsify-copy-code.css
 * @brief 代码复制按钮样式文件
 * @details 定义代码块右上角的复制按钮样式及状态
 */

/**
 * @brief 基础按钮样式
 * @details 定义复制按钮及其子元素的基础交互样式
 */
.docsify-copy-code-button,
.docsify-copy-code-button > span {
    cursor: pointer;          /* 鼠标悬停时显示手型指针 */
    transition: all 0.25s ease; /* 所有属性变化添加0.25秒缓动效果 */
}

/**
 * @brief 复制按钮主样式
 * @details 定义复制按钮的位置、大小和外观
 */
.docsify-copy-code-button {
    position: absolute;       /* 绝对定位 */
    z-index: 1;               /* 堆叠顺序 */
    top: 0;                   /* 顶部对齐 */
    right: 0;                 /* 右侧对齐 */
    overflow: visible;        /* 内容溢出可见 */
    padding: 0.55em 0.7em;    /* 内边距 */
    border: 0;                /* 无边框 */
    border-radius: 4px;       /* 4px圆角 */
    outline: 0;               /* 无轮廓线 */
    font-size: 0.75em;        /* 字体大小 */
    background: #808080;      /* 默认背景色 */
    background: var(--theme-color, #808080); /* 支持主题色变量 */
    color: #fff;              /* 文字颜色 */
    opacity: 0;               /* 初始透明度为0 */
}

/**
 * @brief 按钮内部span元素样式
 */
.docsify-copy-code-button > span {
    border-radius: 3px;       /* 3px圆角 */
    background: inherit;      /* 继承父元素背景 */
    pointer-events: none;     /* 禁止鼠标事件 */
}

/**
 * @brief 状态提示样式
 * @details 定义复制成功/失败的提示样式
 */
.docsify-copy-code-button > .error,
.docsify-copy-code-button > .success {
    position: absolute;       /* 绝对定位 */
    z-index: -100;            /* 置于底层 */
    top: 50%;                 /* 垂直居中 */
    right: 0;                 /* 右侧对齐 */
    padding: 0.5em 0.65em;    /* 内边距 */
    font-size: 0.825em;       /* 字体大小 */
    opacity: 0;               /* 初始透明 */
    transform: translate(0, -50%); /* 垂直居中定位 */
}

/**
 * @brief 错误状态激活样式
 */
.docsify-copy-code-button.error > .error,
.docsify-copy-code-button.success > .success {
    right: 100%;              /* 从右侧移出 */
    opacity: 1;               /* 完全显示 */
    transform: translate(-25%, -50%); /* 向左移动25%并保持垂直居中 */
}

/**
 * @brief 按钮显示条件
 */
.docsify-copy-code-button:focus,
pre:hover .docsify-copy-code-button {
    opacity: 1;               /* 完全显示 */
}

/**
 * @brief ARIA提示元素样式
 * @details 为屏幕阅读器提供提示但视觉上隐藏
 */
.docsify-copy-code-button > [aria-live] {
    position: absolute;       /* 绝对定位 */
    left: -10000px;           /* 移出可视区域 */
    top: auto;                /* 顶部自动定位 */
    width: 1px;               /* 最小宽度 */
    height: 1px;              /* 最小高度 */
    overflow: hidden;         /* 内容溢出隐藏 */
}