$color-background = #fff;
  $color-checked = #E3EAF0;
  $color-text-main = #282828;
  $color-text-second = #97A1B3;

  .tn-select-box {
    display: flex;
    width: 100%;
    height: 200px;
  }
  .tn {
    &-select {
      &-item {
        overflow: hidden;
        width: 100%;
        text-align: center;
        height: 200px;
        background: $color-background;
        position: relative;
      }

      &-ul {
        position: relative;
      }

      &-line, &-list, &-wheel {
        position: absolute;
        left: 0;
        right: 0;
        top: 93px;
      }

      &-line {
        z-index: 3;
      }

      &-list {
        z-index: 2;
        background: $color-background;
      }

      &-wheel {
        z-index: 1;
      }

      &-line {
        &:after, &:before {
          position: absolute;
          top: 0;
          left: 0;
          content: ' ';
          width: 200%;
          background: $color-checked;
          width: 100%;
          height: 2px;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }

        &:before {
          bottom: -1px;
          top: auto;
        }
      }

      &-line, &-list {
        height: 34px;
        transform: translate3d(0px, 0px, 110px);
      }

      &-list {
        overflow: hidden;
        &-show{
          overflow: visible;
        }
      }

      &-list-item, &-wheel-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 34px;
        font-size: 18px;
        color: $color-text-second;

        &.hidden {
          visibility: hidden;
          opacity: 0;
        }
      }

      &-wheel {
        &-item {
          color: $color-text-main;
          font-size: 22px;
          height: 34px;
        }
      }
    }
  }