CSS 变量 定义及引用

将 CSS 变量定义在组件的根元素上，这样变量的作用域就限制在这个组件内，不会影响其他组件。

/* 在组件的根元素上定义 CSS 变量 */
.reyo-time-picker {
    --time-option-height: 6px; /* 定义基准高度变量 */
    position: relative;
    width: 100px;
    display: inline-block;
}

/* 在组件内部使用这个变量 */
.time-option {
    padding: 8px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    position: relative;
    height: var(--time-option-height); /* 使用变量 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333 !important;
    margin: 2px 4px;
    border-radius: 4px;
    border: 1px solid transparent;
}

/* 占位符使用 calc() 计算高度 */
.time-option.placeholder {
    visibility: hidden;
    cursor: default;
    pointer-events: none;
    height: calc(var(--time-option-height) + 2px); /* 高度加2 */
    background: transparent;
    border: none;
}