/**
 * 实用工具类
 * 提供边框、圆角、阴影、光标、透明度、过渡等原子级工具类
 */

/* ==========================================================================
   1. 边框工具类
   ========================================================================== */

/* 边框样式 */
.border-0 {
    border-width: var(--border-width-0);
}

.border {
    border-width: var(--border-width-1);
}

.border-2 {
    border-width: var(--border-width-2);
}

.border-4 {
    border-width: var(--border-width-4);
}

/* 边框方向 */
.border-t {
    border-top-width: var(--border-width-1);
}

.border-r {
    border-right-width: var(--border-width-1);
}

.border-b {
    border-bottom-width: var(--border-width-1);
}

.border-l {
    border-left-width: var(--border-width-1);
}

/* 边框样式类型 */
.border-solid {
    border-style: var(--border-style-solid);
}

.border-dashed {
    border-style: var(--border-style-dashed);
}

.border-dotted {
    border-style: var(--border-style-dotted);
}

.border-none {
    border-style: var(--border-style-none);
}

/* ==========================================================================
   2. 圆角工具类
   ========================================================================== */

.rounded-none {
    border-radius: var(--radius-none);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded {
    border-radius: var(--radius-base);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* 圆角方向 */
.rounded-t-none {
    border-top-left-radius: var(--radius-none);
    border-top-right-radius: var(--radius-none);
}

.rounded-t-sm {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

.rounded-t {
    border-top-left-radius: var(--radius-base);
    border-top-right-radius: var(--radius-base);
}

.rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.rounded-r-none {
    border-top-right-radius: var(--radius-none);
    border-bottom-right-radius: var(--radius-none);
}

.rounded-r-sm {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.rounded-r {
    border-top-right-radius: var(--radius-base);
    border-bottom-right-radius: var(--radius-base);
}

.rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.rounded-b-none {
    border-bottom-right-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
}

.rounded-b-sm {
    border-bottom-right-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.rounded-b {
    border-bottom-right-radius: var(--radius-base);
    border-bottom-left-radius: var(--radius-base);
}

.rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.rounded-l-none {
    border-top-left-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
}

.rounded-l-sm {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.rounded-l {
    border-top-left-radius: var(--radius-base);
    border-bottom-left-radius: var(--radius-base);
}

.rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

/* ==========================================================================
   3. 阴影工具类
   ========================================================================== */

.shadow-none {
    box-shadow: var(--shadow-none);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow {
    box-shadow: var(--shadow-base);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

.shadow-inner {
    box-shadow: var(--shadow-inner);
}

/* 彩色阴影 */
.shadow-primary {
    box-shadow: var(--shadow-primary);
}

.shadow-success {
    box-shadow: var(--shadow-success);
}

.shadow-error {
    box-shadow: var(--shadow-error);
}

/* ==========================================================================
   4. 光标工具类
   ========================================================================== */

.cursor-auto {
    cursor: auto;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-wait {
    cursor: wait;
}

.cursor-text {
    cursor: text;
}

.cursor-move {
    cursor: move;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-help {
    cursor: help;
}

/* ==========================================================================
   5. 透明度工具类
   ========================================================================== */

.opacity-0 {
    opacity: 0;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

/* ==========================================================================
   6. 过渡与动画工具类
   ========================================================================== */

/* 过渡属性 */
.transition-none {
    transition-property: none;
}

.transition-all {
    transition-property: all;
}

.transition {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
}

.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
}

.transition-opacity {
    transition-property: opacity;
}

.transition-shadow {
    transition-property: box-shadow;
}

.transition-transform {
    transition-property: transform;
}

/* 过渡时长 */
.duration-75 {
    transition-duration: var(--transition-duration-75);
}

.duration-100 {
    transition-duration: var(--transition-duration-100);
}

.duration-150 {
    transition-duration: var(--transition-duration-150);
}

.duration-200 {
    transition-duration: var(--transition-duration-200);
}

.duration-250 {
    transition-duration: var(--transition-duration-250);
}

.duration-300 {
    transition-duration: var(--transition-duration-300);
}

.duration-500 {
    transition-duration: var(--transition-duration-500);
}

/* 缓动函数 */
.ease-linear {
    transition-timing-function: var(--transition-timing-linear);
}

.ease-in {
    transition-timing-function: var(--transition-timing-ease-in);
}

.ease-out {
    transition-timing-function: var(--transition-timing-ease-out);
}

.ease-in-out {
    transition-timing-function: var(--transition-timing-ease-in-out);
}

/* 延迟 */
.delay-75 {
    transition-delay: 75ms;
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-150 {
    transition-delay: 150ms;
}

.delay-200 {
    transition-delay: 200ms;
}

/* ==========================================================================
   7. 变换工具类
   ========================================================================== */

/* 缩放 */
.scale-0 {
    transform: scale(0);
}

.scale-50 {
    transform: scale(0.5);
}

.scale-75 {
    transform: scale(0.75);
}

.scale-90 {
    transform: scale(0.9);
}

.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1);
}

.scale-105 {
    transform: scale(1.05);
}

.scale-110 {
    transform: scale(1.1);
}

.scale-125 {
    transform: scale(1.25);
}

/* 旋转 */
.rotate-0 {
    transform: rotate(0deg);
}

.rotate-45 {
    transform: rotate(45deg);
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.-rotate-45 {
    transform: rotate(-45deg);
}

.-rotate-90 {
    transform: rotate(-90deg);
}

.-rotate-180 {
    transform: rotate(-180deg);
}

/* 平移 */
.translate-x-0 {
    transform: translateX(0);
}

.translate-x-full {
    transform: translateX(100%);
}

.translate-x--full {
    transform: translateX(-100%);
}

.translate-y-0 {
    transform: translateY(0);
}

.translate-y-full {
    transform: translateY(100%);
}

.translate-y--full {
    transform: translateY(-100%);
}

/* 变换原点 */
.origin-center {
    transform-origin: center;
}

.origin-top {
    transform-origin: top;
}

.origin-top-right {
    transform-origin: top right;
}

.origin-right {
    transform-origin: right;
}

.origin-bottom-right {
    transform-origin: bottom right;
}

.origin-bottom {
    transform-origin: bottom;
}

.origin-bottom-left {
    transform-origin: bottom left;
}

.origin-left {
    transform-origin: left;
}

.origin-top-left {
    transform-origin: top left;
}

/* ==========================================================================
   8. 溢出工具类
   ========================================================================== */

.overflow-visible {
    overflow: visible;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-visible {
    overflow-x: visible;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-visible {
    overflow-y: visible;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* ==========================================================================
   9. 文本溢出工具类
   ========================================================================== */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overflow-ellipsis {
    text-overflow: ellipsis;
}

.overflow-clip {
    text-overflow: clip;
}

/* 多行文本截断 */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* ==========================================================================
   10. 用户选择工具类
   ========================================================================== */

.select-none {
    user-select: none;
}

.select-text {
    user-select: text;
}

.select-all {
    user-select: all;
}

.select-auto {
    user-select: auto;
}

/* ==========================================================================
   11. 指针事件工具类
   ========================================================================== */

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* ==========================================================================
   12. 可见性工具类
   ========================================================================== */

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* ==========================================================================
   13. 背景相关工具类
   ========================================================================== */

.bg-fixed {
    background-attachment: fixed;
}

.bg-local {
    background-attachment: local;
}

.bg-scroll {
    background-attachment: scroll;
}

.bg-clip-border {
    background-clip: border-box;
}

.bg-clip-padding {
    background-clip: padding-box;
}

.bg-clip-content {
    background-clip: content-box;
}

.bg-clip-text {
    background-clip: text;
}

.bg-repeat {
    background-repeat: repeat;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

.bg-repeat-x {
    background-repeat: repeat-x;
}

.bg-repeat-y {
    background-repeat: repeat-y;
}

.bg-repeat-round {
    background-repeat: round;
}

.bg-repeat-space {
    background-repeat: space;
}

.bg-cover {
    background-size: cover;
}

.bg-contain {
    background-size: contain;
}

.bg-center {
    background-position: center;
}

.bg-top {
    background-position: top;
}

.bg-bottom {
    background-position: bottom;
}

.bg-left {
    background-position: left;
}

.bg-right {
    background-position: right;
}

/* ==========================================================================
   14. 表格布局工具类
   ========================================================================== */

.table-auto {
    table-layout: auto;
}

.table-fixed {
    table-layout: fixed;
}

.border-collapse {
    border-collapse: collapse;
}

.border-separate {
    border-collapse: separate;
}

/* ==========================================================================
   15. 列表样式工具类
   ========================================================================== */

.list-inside {
    list-style-position: inside;
}

.list-outside {
    list-style-position: outside;
}

.list-none {
    list-style-type: none;
}

.list-disc {
    list-style-type: disc;
}

.list-decimal {
    list-style-type: decimal;
}

/* ==========================================================================
   16. 占位符颜色工具类
   ========================================================================== */

.placeholder-transparent::placeholder {
    color: transparent;
}

.placeholder-current::placeholder {
    color: currentColor;
}

/* ==========================================================================
   17. 响应式实用工具类
   ========================================================================== */

@media (min-width: 768px) {
    .md-border {
        border-width: var(--border-width-1);
    }

    .md-rounded {
        border-radius: var(--radius-base);
    }

    .md-shadow {
        box-shadow: var(--shadow-base);
    }
}

@media (min-width: 1024px) {
    .lg-border {
        border-width: var(--border-width-1);
    }

    .lg-rounded {
        border-radius: var(--radius-base);
    }

    .lg-shadow {
        box-shadow: var(--shadow-base);
    }
}

/* ==========================================================================
   18. 打印样式工具类
   ========================================================================== */

@media print {
    .print-hidden {
        display: none !important;
    }

    .print-block {
        display: block !important;
    }

    .print-inline {
        display: inline !important;
    }

    .print-inline-block {
        display: inline-block !important;
    }
}