@import 'planes/base.css';
@import 'planes/unit.css';

.moo-select {
  @mixin clear-select;
  position: relative;
  text-align: center;
  cursor: pointer;
  border-radius: 5pxr;
  background-color: #fff;
}

.moo-select .select-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.moo-select .select-pull-down,
.moo-select .select-default {
  @mixin clear-select;
  border: 1px solid #07a220;
  outline: none;

  .iconfont {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -13pxr;
    margin-right: 5pxr;
    font-size: 26pxr;
    color: #0d462c;
  }
}

.moo-select .select-pull-down {
  @mixin clear-select;
  position: absolute;
  top: 100%;
  margin-top: -1px;
  width: 100%;
  z-index: 3;
  box-sizing: border-box;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 5pxr;
  border-bottom-right-radius: 5pxr;
  background-color: #fff;

  .select-option {
    padding-top: 8pxr;
    padding-bottom: 8pxr;
    font-size: 14pxr;
  }
  .select-clear-option {
    color: #c5c5c5;
  }
  .select-option:hover {
    color: #0cff33;
  }
  .select-default {
    z-index: 0;
  }
}

.moo-select .select-default:hover {
  border: 1px solid #35cb44;
  color: #35cb44;
  .iconfont {
    color: #35cb44;
  }
}

.moo-select .select-default {
  position: relative;
  z-index: 2;
  padding-top: 8pxr;
  padding-bottom: 8pxr;
  border-radius: 5pxr;
  box-sizing: border-box;

  span {
    font-size: 12pxr;
    color: #00570b;
  }
}

.moo-select .list-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.moo-select .list-open:hover {
  border-top: 1px solid #07a220;
  border-left: 1px solid #07a220;
  border-right: 1px solid #07a220;
}