/**
 * Laifen 通用工具类
 *
 * 提供常用的 margin、padding、字体大小等工具类
 * 基于 variables.css 中定义的设计系统
 *
 * @package Laifen_Russia
 * @since 1.0.0
 */

/* ==========================================================================
   Margin 工具类
   ========================================================================== */

/* 全方向 margin */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--laifen-spacing-xs) !important; }
.m-sm { margin: var(--laifen-spacing-sm) !important; }
.m-md { margin: var(--laifen-spacing-md) !important; }
.m-lg { margin: var(--laifen-spacing-lg) !important; }
.m-xl { margin: var(--laifen-spacing-xl) !important; }
.m-2xl { margin: var(--laifen-spacing-2xl) !important; }
.m-3xl { margin: var(--laifen-spacing-3xl) !important; }
.m-auto { margin: auto !important; }

/* 上下 margin */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--laifen-spacing-xs) !important; margin-bottom: var(--laifen-spacing-xs) !important; }
.my-sm { margin-top: var(--laifen-spacing-sm) !important; margin-bottom: var(--laifen-spacing-sm) !important; }
.my-md { margin-top: var(--laifen-spacing-md) !important; margin-bottom: var(--laifen-spacing-md) !important; }
.my-lg { margin-top: var(--laifen-spacing-lg) !important; margin-bottom: var(--laifen-spacing-lg) !important; }
.my-xl { margin-top: var(--laifen-spacing-xl) !important; margin-bottom: var(--laifen-spacing-xl) !important; }
.my-2xl { margin-top: var(--laifen-spacing-2xl) !important; margin-bottom: var(--laifen-spacing-2xl) !important; }
.my-3xl { margin-top: var(--laifen-spacing-3xl) !important; margin-bottom: var(--laifen-spacing-3xl) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* 左右 margin */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--laifen-spacing-xs) !important; margin-right: var(--laifen-spacing-xs) !important; }
.mx-sm { margin-left: var(--laifen-spacing-sm) !important; margin-right: var(--laifen-spacing-sm) !important; }
.mx-md { margin-left: var(--laifen-spacing-md) !important; margin-right: var(--laifen-spacing-md) !important; }
.mx-lg { margin-left: var(--laifen-spacing-lg) !important; margin-right: var(--laifen-spacing-lg) !important; }
.mx-xl { margin-left: var(--laifen-spacing-xl) !important; margin-right: var(--laifen-spacing-xl) !important; }
.mx-2xl { margin-left: var(--laifen-spacing-2xl) !important; margin-right: var(--laifen-spacing-2xl) !important; }
.mx-3xl { margin-left: var(--laifen-spacing-3xl) !important; margin-right: var(--laifen-spacing-3xl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* 上 margin */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--laifen-spacing-xs) !important; }
.mt-sm { margin-top: var(--laifen-spacing-sm) !important; }
.mt-md { margin-top: var(--laifen-spacing-md) !important; }
.mt-lg { margin-top: var(--laifen-spacing-lg) !important; }
.mt-xl { margin-top: var(--laifen-spacing-xl) !important; }
.mt-2xl { margin-top: var(--laifen-spacing-2xl) !important; }
.mt-3xl { margin-top: var(--laifen-spacing-3xl) !important; }
.mt-auto { margin-top: auto !important; }

/* 右 margin */
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--laifen-spacing-xs) !important; }
.mr-sm { margin-right: var(--laifen-spacing-sm) !important; }
.mr-md { margin-right: var(--laifen-spacing-md) !important; }
.mr-lg { margin-right: var(--laifen-spacing-lg) !important; }
.mr-xl { margin-right: var(--laifen-spacing-xl) !important; }
.mr-2xl { margin-right: var(--laifen-spacing-2xl) !important; }
.mr-3xl { margin-right: var(--laifen-spacing-3xl) !important; }
.mr-auto { margin-right: auto !important; }

/* 下 margin */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--laifen-spacing-xs) !important; }
.mb-sm { margin-bottom: var(--laifen-spacing-sm) !important; }
.mb-md { margin-bottom: var(--laifen-spacing-md) !important; }
.mb-lg { margin-bottom: var(--laifen-spacing-lg) !important; }
.mb-xl { margin-bottom: var(--laifen-spacing-xl) !important; }
.mb-2xl { margin-bottom: var(--laifen-spacing-2xl) !important; }
.mb-3xl { margin-bottom: var(--laifen-spacing-3xl) !important; }
.mb-auto { margin-bottom: auto !important; }

/* 左 margin */
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--laifen-spacing-xs) !important; }
.ml-sm { margin-left: var(--laifen-spacing-sm) !important; }
.ml-md { margin-left: var(--laifen-spacing-md) !important; }
.ml-lg { margin-left: var(--laifen-spacing-lg) !important; }
.ml-xl { margin-left: var(--laifen-spacing-xl) !important; }
.ml-2xl { margin-left: var(--laifen-spacing-2xl) !important; }
.ml-3xl { margin-left: var(--laifen-spacing-3xl) !important; }
.ml-auto { margin-left: auto !important; }

/* ==========================================================================
   Padding 工具类
   ========================================================================== */

/* 全方向 padding */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--laifen-spacing-xs) !important; }
.p-sm { padding: var(--laifen-spacing-sm) !important; }
.p-md { padding: var(--laifen-spacing-md) !important; }
.p-lg { padding: var(--laifen-spacing-lg) !important; }
.p-xl { padding: var(--laifen-spacing-xl) !important; }
.p-2xl { padding: var(--laifen-spacing-2xl) !important; }
.p-3xl { padding: var(--laifen-spacing-3xl) !important; }

/* 上下 padding */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--laifen-spacing-xs) !important; padding-bottom: var(--laifen-spacing-xs) !important; }
.py-sm { padding-top: var(--laifen-spacing-sm) !important; padding-bottom: var(--laifen-spacing-sm) !important; }
.py-md { padding-top: var(--laifen-spacing-md) !important; padding-bottom: var(--laifen-spacing-md) !important; }
.py-lg { padding-top: var(--laifen-spacing-lg) !important; padding-bottom: var(--laifen-spacing-lg) !important; }
.py-xl { padding-top: var(--laifen-spacing-xl) !important; padding-bottom: var(--laifen-spacing-xl) !important; }
.py-2xl { padding-top: var(--laifen-spacing-2xl) !important; padding-bottom: var(--laifen-spacing-2xl) !important; }
.py-3xl { padding-top: var(--laifen-spacing-3xl) !important; padding-bottom: var(--laifen-spacing-3xl) !important; }

/* 左右 padding */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--laifen-spacing-xs) !important; padding-right: var(--laifen-spacing-xs) !important; }
.px-sm { padding-left: var(--laifen-spacing-sm) !important; padding-right: var(--laifen-spacing-sm) !important; }
.px-md { padding-left: var(--laifen-spacing-md) !important; padding-right: var(--laifen-spacing-md) !important; }
.px-lg { padding-left: var(--laifen-spacing-lg) !important; padding-right: var(--laifen-spacing-lg) !important; }
.px-xl { padding-left: var(--laifen-spacing-xl) !important; padding-right: var(--laifen-spacing-xl) !important; }
.px-2xl { padding-left: var(--laifen-spacing-2xl) !important; padding-right: var(--laifen-spacing-2xl) !important; }
.px-3xl { padding-left: var(--laifen-spacing-3xl) !important; padding-right: var(--laifen-spacing-3xl) !important; }

/* 上 padding */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--laifen-spacing-xs) !important; }
.pt-sm { padding-top: var(--laifen-spacing-sm) !important; }
.pt-md { padding-top: var(--laifen-spacing-md) !important; }
.pt-lg { padding-top: var(--laifen-spacing-lg) !important; }
.pt-xl { padding-top: var(--laifen-spacing-xl) !important; }
.pt-2xl { padding-top: var(--laifen-spacing-2xl) !important; }
.pt-3xl { padding-top: var(--laifen-spacing-3xl) !important; }

/* 右 padding */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--laifen-spacing-xs) !important; }
.pr-sm { padding-right: var(--laifen-spacing-sm) !important; }
.pr-md { padding-right: var(--laifen-spacing-md) !important; }
.pr-lg { padding-right: var(--laifen-spacing-lg) !important; }
.pr-xl { padding-right: var(--laifen-spacing-xl) !important; }
.pr-2xl { padding-right: var(--laifen-spacing-2xl) !important; }
.pr-3xl { padding-right: var(--laifen-spacing-3xl) !important; }

/* 下 padding */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--laifen-spacing-xs) !important; }
.pb-sm { padding-bottom: var(--laifen-spacing-sm) !important; }
.pb-md { padding-bottom: var(--laifen-spacing-md) !important; }
.pb-lg { padding-bottom: var(--laifen-spacing-lg) !important; }
.pb-xl { padding-bottom: var(--laifen-spacing-xl) !important; }
.pb-2xl { padding-bottom: var(--laifen-spacing-2xl) !important; }
.pb-3xl { padding-bottom: var(--laifen-spacing-3xl) !important; }

/* 左 padding */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--laifen-spacing-xs) !important; }
.pl-sm { padding-left: var(--laifen-spacing-sm) !important; }
.pl-md { padding-left: var(--laifen-spacing-md) !important; }
.pl-lg { padding-left: var(--laifen-spacing-lg) !important; }
.pl-xl { padding-left: var(--laifen-spacing-xl) !important; }
.pl-2xl { padding-left: var(--laifen-spacing-2xl) !important; }
.pl-3xl { padding-left: var(--laifen-spacing-3xl) !important; }

/* ==========================================================================
   字体大小工具类
   ========================================================================== */

.text-xs { font-size: var(--laifen-font-xs) !important; }
.text-sm { font-size: var(--laifen-font-sm) !important; }
.text-base { font-size: var(--laifen-font-base) !important; }
.text-lg { font-size: var(--laifen-font-lg) !important; }
.text-xl { font-size: var(--laifen-font-xl) !important; }
.text-2xl { font-size: var(--laifen-font-2xl) !important; }
.text-3xl { font-size: var(--laifen-font-3xl) !important; }
.text-4xl { font-size: var(--laifen-font-4xl) !important; }
.text-5xl { font-size: var(--laifen-font-5xl) !important; }

/* ==========================================================================
   字重工具类
   ========================================================================== */

.font-light { font-weight: var(--laifen-font-light) !important; }
.font-regular { font-weight: var(--laifen-font-regular) !important; }
.font-medium { font-weight: var(--laifen-font-medium) !important; }
.font-semibold { font-weight: var(--laifen-font-semibold) !important; }
.font-bold { font-weight: var(--laifen-font-bold) !important; }

/* ==========================================================================
   行高工具类
   ========================================================================== */

.leading-tight { line-height: var(--laifen-line-height-tight) !important; }
.leading-normal { line-height: var(--laifen-line-height-normal) !important; }
.leading-relaxed { line-height: var(--laifen-line-height-relaxed) !important; }

/* ==========================================================================
   文字对齐工具类
   ========================================================================== */

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* ==========================================================================
   文字颜色工具类
   ========================================================================== */

.text-primary { color: var(--laifen-text-primary) !important; }
.text-secondary { color: var(--laifen-text-secondary) !important; }
.text-muted { color: var(--laifen-text-muted) !important; }
.text-white { color: var(--laifen-text-white) !important; }
.text-black { color: var(--laifen-text-black) !important; }
.text-brand { color: var(--laifen-primary) !important; }
.text-success { color: var(--laifen-success) !important; }
.text-danger { color: var(--laifen-danger) !important; }
.text-warning { color: var(--laifen-warning) !important; }
.text-info { color: var(--laifen-info) !important; }

/* ==========================================================================
   背景颜色工具类
   ========================================================================== */

.bg-white { background-color: var(--laifen-bg-white) !important; }
.bg-light { background-color: var(--laifen-bg-light) !important; }
.bg-gray { background-color: var(--laifen-bg-gray) !important; }
.bg-dark { background-color: var(--laifen-bg-dark) !important; }
.bg-black { background-color: var(--laifen-bg-black) !important; }
.bg-primary { background-color: var(--laifen-primary) !important; }
.bg-primary-light { background-color: var(--laifen-primary-light) !important; }
.bg-success { background-color: var(--laifen-success) !important; }
.bg-success-light { background-color: var(--laifen-success-light) !important; }
.bg-danger { background-color: var(--laifen-danger) !important; }
.bg-danger-light { background-color: var(--laifen-danger-light) !important; }
.bg-warning { background-color: var(--laifen-warning) !important; }
.bg-warning-light { background-color: var(--laifen-warning-light) !important; }
.bg-info { background-color: var(--laifen-info) !important; }
.bg-info-light { background-color: var(--laifen-info-light) !important; }
.bg-transparent { background-color: transparent !important; }

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

.border { border: 1px solid var(--laifen-border-light) !important; }
.border-0 { border: 0 !important; }
.border-t { border-top: 1px solid var(--laifen-border-light) !important; }
.border-r { border-right: 1px solid var(--laifen-border-light) !important; }
.border-b { border-bottom: 1px solid var(--laifen-border-light) !important; }
.border-l { border-left: 1px solid var(--laifen-border-light) !important; }

.border-light { border-color: var(--laifen-border-light) !important; }
.border-gray { border-color: var(--laifen-border-gray) !important; }
.border-dark { border-color: var(--laifen-border-dark) !important; }
.border-primary { border-color: var(--laifen-primary) !important; }

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

.rounded-none { border-radius: var(--laifen-radius-none) !important; }
.rounded-sm { border-radius: var(--laifen-radius-sm) !important; }
.rounded { border-radius: var(--laifen-radius-md) !important; }
.rounded-md { border-radius: var(--laifen-radius-md) !important; }
.rounded-lg { border-radius: var(--laifen-radius-lg) !important; }
.rounded-xl { border-radius: var(--laifen-radius-xl) !important; }
.rounded-full { border-radius: var(--laifen-radius-full) !important; }

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

.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--laifen-shadow-sm) !important; }
.shadow { box-shadow: var(--laifen-shadow-md) !important; }
.shadow-md { box-shadow: var(--laifen-shadow-md) !important; }
.shadow-lg { box-shadow: var(--laifen-shadow-lg) !important; }
.shadow-xl { box-shadow: var(--laifen-shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--laifen-shadow-2xl) !important; }

/* ==========================================================================
   Display 工具类
   ========================================================================== */

.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* ==========================================================================
   Flexbox 工具类
   ========================================================================== */

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }
.align-center { align-items: center !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch { align-items: stretch !important; }

.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-initial { flex: 0 1 auto !important; }
.flex-none { flex: none !important; }

.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* ==========================================================================
   Gap 工具类
   ========================================================================== */

.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--laifen-spacing-xs) !important; }
.gap-sm { gap: var(--laifen-spacing-sm) !important; }
.gap-md { gap: var(--laifen-spacing-md) !important; }
.gap-lg { gap: var(--laifen-spacing-lg) !important; }
.gap-xl { gap: var(--laifen-spacing-xl) !important; }
.gap-2xl { gap: var(--laifen-spacing-2xl) !important; }
.gap-3xl { gap: var(--laifen-spacing-3xl) !important; }

/* ==========================================================================
   宽度工具类
   ========================================================================== */

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.max-w-sm { max-width: var(--laifen-container-sm) !important; }
.max-w-md { max-width: var(--laifen-container-md) !important; }
.max-w-lg { max-width: var(--laifen-container-lg) !important; }
.max-w-xl { max-width: var(--laifen-container-xl) !important; }
.max-w-2xl { max-width: var(--laifen-container-2xl) !important; }
.max-w-full { max-width: 100% !important; }

/* ==========================================================================
   高度工具类
   ========================================================================== */

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* ==========================================================================
   Position 工具类
   ========================================================================== */

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* ==========================================================================
   Overflow 工具类
   ========================================================================== */

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* ==========================================================================
   Visibility 工具类
   ========================================================================== */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ==========================================================================
   Opacity 工具类
   ========================================================================== */

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ==========================================================================
   Cursor 工具类
   ========================================================================== */

.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ==========================================================================
   Transition 工具类
   ========================================================================== */

.transition-fast { transition: all var(--laifen-transition-fast) !important; }
.transition { transition: all var(--laifen-transition-base) !important; }
.transition-slow { transition: all var(--laifen-transition-slow) !important; }
.transition-none { transition: none !important; }

/* ==========================================================================
   响应式工具类 - 移动端隐藏/显示
   ========================================================================== */

@media (max-width: 767px) {
    .d-md-none { display: none !important; }
}

@media (min-width: 768px) {
    .d-none-md { display: none !important; }
}

@media (max-width: 1023px) {
    .d-lg-none { display: none !important; }
}

@media (min-width: 1024px) {
    .d-none-lg { display: none !important; }
}
