@import '@/uni_modules/lime-style/index.scss';
@import '@/uni_modules/lime-style/mixins/ellipsis.scss';

/* #ifdef  uniVersion >= 4.75 */ 
$use-css-var: true;
/* #endif */

$item: #{$prefix}-tabbar-item;

// 尺寸变量
$tabbar-height: create-var(tabbar-height, 40px);
$tabbar-font-size: create-var(tabbar-font-size, $font-size-md);
$tabbar-min-font-size: create-var(tabbar-font-size, $font-size-sm);

// 颜色变量
$tabbar-color: create-var(tabbar-color, $text-color-1);
$tabbar-bg-color: create-var(tabbar-bg-color, $bg-color-container);
$tabbar-active-color: create-var(tabbar-active-color, $primary-color);
$tabbar-active-bg-color: create-var(tabbar-active-bg-color, $primary-color-1);

// 间距变量（新增）
$tabbar-item-margin-x: create-var(tabbar-item-margin-x, 0);    // 水平margin
$tabbar-item-margin-y: create-var(tabbar-item-margin-y, 8px);  // 垂直margin
$tabbar-item-padding-x: create-var(tabbar-item-padding-x, 12px); // 水平padding
$tabbar-item-padding-y: create-var(tabbar-item-padding-y, 0);    // 垂直padding
$tabbar-item-crowded-padding-x: create-var(tabbar-item-crowded-padding-x, 8px); // 拥挤状态水平padding

/* #ifdef MP */
:host {
    flex: 1;
}
/* #endif */

.#{$item} {
    /* #ifndef UNI-APP-X && APP */
    box-sizing: border-box;
    user-select: none;
    display: flex;
    /* #endif */
    
    flex: 1;
    height: $tabbar-height;
    position: relative;
    // margin: $tabbar-item-margin-y $tabbar-item-margin-x;  // 使用拆分后的margin变量
	@include margin($tabbar-item-margin-y $tabbar-item-margin-x);
    background-color: $tabbar-bg-color;
    // padding: $tabbar-item-padding-y $tabbar-item-padding-x;  // 使用拆分后的padding变量
	@include padding($tabbar-item-padding-y $tabbar-item-padding-x);
    overflow: visible;

    &__icon {
        &-wrap {
            overflow: visible;    
        }
    }
    
    &--crowded {
        // padding: $tabbar-item-padding-y $tabbar-item-crowded-padding-x;  // 拥挤状态使用专用变量
		@include padding($tabbar-item-padding-y $tabbar-item-padding-x);
    }

    &--round {
        border-radius: 99px;
    }

    &__content {
        box-sizing: border-box;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
        overflow: visible;
    
        &--checked {
            /* #ifndef UNI-APP-X && APP */
            color: $tabbar-active-color;
            /* #endif */
            /* #ifndef UNI-APP-X */
            .l-tabbar-item__text {
                color: $tabbar-active-color;
				font-weight: 700;
            }
            /* #endif */
        }
        &--disabled {
            opacity: 0.5;
        }
        &--tag {
            border-radius: 99px;
        }

        &--tag#{&}--checked {
            background-color: $tabbar-active-bg-color;
        }
    }
    
    &__icon {
        color: $tabbar-color;
    }
    
    &__text {
        color: $tabbar-color;
        &--small {
            font-size: $tabbar-min-font-size;
            padding-top: 4px;
        }
        &--only {
            font-size: $tabbar-font-size;
        }
        &--checked {
            color: $tabbar-active-color;
            font-weight: 700;
        }
		&--ellipsis {
			@include ellipsisLn(1);
		}
    }
}