@import "../../style/global.scss";

$rootName: x-picker;
$pickerItemH: 3em;

.#{$rootName}-col {
  position: relative;
  height: calc(#{$pickerItemH} * 5);
  overflow: hidden;
  background: #fff;
  font-size: 1rem;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5));
    background-position: top, bottom;
    background-size: 100% calc(#{$pickerItemH} * 2);
    background-repeat: no-repeat;
    transform: translateZ(0);
  }

  &-item {
    height: $pickerItemH;
    text-align: center;
    line-height: $pickerItemH;
    border: 1px solid transparent;
    font-size: 1em;
  }

  &-indicator {
    content: '';
    position: absolute;
    top: calc(#{$pickerItemH} * 2);
    left: 0;
    right: 0;
    height: $pickerItemH;
    border-color: $border-color;
    border-style: solid;
    border-width: 0;
    border-top-width: 1px;
    border-bottom-width: 1px;
    z-index: 20;
  }

  &-content {
    position: absolute;
    top: calc(#{$pickerItemH} * 2);
    left: 0;
    right: 0;
  }
}

.#{$rootName}-root {
  .#{$rootName}-header {
    background: #fff;
    border: 1px solid $border-color;
    padding: .5em 1em;
    font-size: $font-size;
    overflow: hidden;

    a {
      color: $link-color;
    }
  }

  .x-popup-mask {
    background: $mask-background-color;
  }
}

.#{$rootName}-multiple {
  background: #fff;
  &-container {
    display: flex;
    justify-content: space-between;
  }
  .x-picker-col {
    flex: 1;
    border-width: 0;
  }
}