@charset "utf-8";
@import "../core/variables";
@import "../core/classes";

// 定义select的基础构造
@mixin _select {
    @include flexbox;
    position: relative;
    overflow: hidden;
    height: map-get($select, item-height) * map-get($select, item);
    line-height: map-get($select, item-height);
    background-color: white;
    &::before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: map-get($select, item-height);
        margin-top: -#{map-get($select, item-height) / 2};
        content: "\0020";
        border: 1px solid map-get($select, bordercolor);
        border-width: 1px 0;
    }
    &-item,
    &-item-list,
    &-item ul {
        height: 100%;
    }
    &-item {
        @include flex();
        position: relative;
        z-index: 2;
        text-align: center;
    }
    &-item-list {
        ul {
            position: relative;
        }
        li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: map-get($select, item-height);
            &.disabled {
                opacity: .4;
            }
        }
    }
    &-item-tag {
        position: absolute;
        top: 50%;
        right: .1rem;
        @include transform(translatey(-50%));
    }
    > .mask {
        position: absolute;
        z-index: 3;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: "\0020";
        pointer-events: none;
        background: -webkit-linear-gradient(top, white, rgba(255, 255, 255, .4) 40%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .4) 60%, white);
    }
}

/**
 * @module widget
 * @method yo-select
 * @description 构造yo-select的自定义使用方法
 * @demo http://doyoe.github.io/Yo/demo/widget/yo-select.html
 * @param {String} $name 定义select名称
 * @param {Length} $width 定义select显示的子项个数
 * @param {Length} $height 定义select子项高度
 * @param {Color} $bordercolor 定义select边框色
 */

@mixin yo-select(
    $name: default,
    $item: default,
    $item-height: default,
    $bordercolor: default) {
    // 区别是否新增实例还是修改本身
    @if $name == default {
        $name: "";
    } @else {
        $name: "-#{$name}";
    }
    // 如果值为default,则取config的定义
    @if $item == default {
        $item: map-get($select, item);
    }
    @if $item-height == default {
        $item-height: map-get($select, item-height);
    }
    @if $bordercolor == default {
        $bordercolor: map-get($select, bordercolor);
    }
    .yo-select#{$name} {
        @if $item-height != map-get($select, item-height) or $item != map-get($select, item) {
            height: $item-height * $item;
            line-height: $item-height;
        }
        &::before {
            @if $item-height != map-get($select, item-height) {
                height: $item-height;
                margin-top: -#{$item-height / 2};
            }
            @if $bordercolor != map-get($select, bordercolor) {
                border-color: $bordercolor;
            }
        }
        &-item-tag {
            @if $item-height != map-get($select, item-height) or $item != map-get($select, item) {
                line-height: $item-height * $item;
            }
        }
        // 增量扩展
        @content;
    }
}

// 调用本文件时载入select基础构造
.yo-select {
    @include _select;
}