@import "./../variable.scss";
.hx-folder {
  z-index: 101;
  font-size: $font-md;
  width: 100%;
  min-width: 200px;
  position: fixed;
  padding: 0;
  visibility: hidden;
  opacity: .0;
  transform: none;
  &.show {
    visibility: visible;
    opacity: 1.0;
  }
  &::before {
    content: "";
    height: 0;
    width: 0;
    top: -7px;
    border-bottom: 7px solid white;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 0 solid transparent;
    position: absolute;
    @include centerHorizontal;
  }
  .pad-select-zone {
    max-width: unset;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    -webkit-overflow-scrolling: touch;
    padding: $pm-sm/2 0 0;
  }
}

@media screen and (max-width: 640px) {
  @mixin hxFolderBlock() {
    height: 100%;
    width: 100%;
    top: 0!important;
    left: 0!important;
    padding: 0;
    box-sizing: border-box;
  }
  .hx-folder {
    // 移动端 actionsheet形式
    transition: opacity .2s, visibility .2s;
    box-shadow: 0 0px $pm-bg rgba(190, 185, 185, 0.28);
    &.responsive {
      @include hxFolderBlock;
      box-shadow: unset;
      overflow: hidden;
      .mask {
        @include hxFolderBlock;
        background-color: rgba(0,0,0,.65);
      }
      .pad-content {
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translateY(100%);
        width: 100%;
        display: block;
        transition: transform .4s;
      }
      &.show .pad-content {
        transform: translateY(0);
      }
      &::before {
        display: none;
      }
    }
  }
}

@media screen and (min-width: 640px) {
  .hx-folder {
    box-shadow: 0 0px $pm-bg rgba(190, 185, 185, 0.28);
    transition: opacity .4s, visibility .4s;
    border-radius: $pm-sm / 2;
    .pad-content {
      border-radius: $pm-sm / 2;
      overflow: hidden;
    }
  }
}