@import "./abstracts/variable";
@import "./abstracts/mixin";
@import "./loading.scss";

@include b(picker-view) {
  @include e(columns) {
    position: relative;
    display: flex;
    background: $-picker-bg;
    overflow: hidden;
    align-items: center;
  }

  @include e(mask) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $-picker-mask;
    background-position: top, bottom;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
    filter: blur(4px);
  }

  @include e(loading) {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: $-picker-loading-bg;
  }
}

@include b(picker-view-wrapper) {
  flex: 1;
  position: relative;
  height: $-picker-column-height;
  overflow: hidden;
  text-align: center;
  list-style: none;
  font-size: $-picker-column-fs;
  color: $-picker-column-color;
}

@include b(picker-view-roller) {
  transform-style: preserve-3d;
  position: absolute;
  top: $-picker-column-height / 2 - $-picker-column-item-height / 2;
  width: 100%;
  height: $-picker-column-item-height;
  margin: 0;
  padding: 0;
  list-style: none;

  @include e(item) {
    position: absolute;
    user-select: none;
    font-size: $-picker-column-fs;
    top: 0;
    width: 100%;
    padding: $-picker-column-padding;
    box-sizing: border-box;
    backface-visibility: hidden;
    background-color: $-picker-bg;
    height: $-picker-column-item-height;
    line-height: $-picker-column-item-height;
    @include lineEllipsis;

    @include when(hidden) {
      visibility: hidden;
      opacity: 0;
    }
    @include m(disabled) {
      color: $-picker-column-disabled-color;
    }
  }
}

@include b(picker-view-list) {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    padding: $-picker-column-padding;
    @include lineEllipsis;
  }
}

@include b(picker-view-content) {
  position: absolute;
  top: $-picker-column-height / 2 - $-picker-column-item-height / 2;
  width: 100%;
  height: $-picker-column-item-height;
  overflow: hidden;
  background-color: $-picker-column-select-bg;
  font-size: $-picker-column-fs;
  pointer-events: none;

  li {
    height: $-picker-column-item-height;
    line-height: $-picker-column-item-height;
  }
}