@import "_fonts";

.popupSelect_popup{
  height:0px;
  position:fixed;
  overflow:hidden;
  display:flex;
  width:100%;
  top:0px;
  left:0px;
  z-index:99999999;
  //-webkit-backdrop-filter:blur(10px);
  //backdrop-filter:blur(10px);
  //background:rgba(255,255,255,0.9);
  background:linear-gradient(to bottom right,#267cf0,#7a3fd8);

  justify-content: center;
  align-items: center;
  transition:all 0.4s ease-in-out;


  .arrowDown{
    display:block;
    position:absolute;
    bottom:10px;
    width:100%;
    height:30px;
    text-align:center;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transform:rotateX(50deg);
    opacity:0.6;
    transition:opacity 0.3s ease-in-out;

    &:hover{
      opacity:1;
    }
  }
  .arrowUp{
    display:block;
    position:absolute;
    top:10px;
    width:100%;
    height:30px;
    text-align:center;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transform:rotateX(50deg);
    opacity:0;
    transition:opacity 0.3s ease-in-out;

    &:hover{
      opacity:1;
    }
  }

  ul{
    display:block;
    list-style: none;
    margin:0px;
    padding:10px;
    width:100%;
    overflow-x:none;
    overflow-y:auto;
    max-height:100%;
    color:#fff;


    .selectHeader{
      display:block;
      text-align:center;
      width:400px;
      max-width:90%;
      margin-left:auto;
      margin-right:auto;
      font-family:$boldFont;
      font-size:24px;
      line-height:1.3em;
      padding:20px;

    }

    li{
      list-style:none;

      display:block;
      margin:0px;
      padding:14px;
      text-align:center;
      width:400px;
      max-width:90%;
      margin-left:auto;
      margin-right:auto;
      //border-top:1px solid rgba(0,0,0,0.2);
      //border-bottom:1px solid rgba(0,0,0,0.2);
      border-top:1px solid rgba(255,255,255,0.1);
      border-bottom:1px solid rgba(255,255,255,0.1);
      font-size:18px;
      line-height:22px;
      cursor:pointer;
      transform-origin:top center;
      //transition:all 0.2s linear;
      opacity:0.6;

      &.selected{
        background:rgba(0,0,0,0.8);
        color:#fff;
      }

      &:hover{
        transform:scale(1.1);
        opacity:1;
        font-weight:bold;

      }

      &:nth-child(2){
        border-top:0px;
      }

      &:last-child{
        border-bottom:0px;
      }

    }
  }

  &.show{

    height:100vh;

  }
}

@media screen and (max-width:600px){
  .popupSelect_popup{
    &.show{
      padding-bottom:140px;
    }

    .arrowDown{
      bottom:120px;
    }
  }
}

.popupSelect_toggle
{
  color:#000;
  opacity:0.6;
  font-size:16px;
  line-height:20px;
  padding:12px;
  display:block;
//  margin:5px;
  cursor:pointer;

  transition:all 0.3s ease-in-out;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  max-width:100%;
  transform-origin:center left;
  position:relative;
  padding-right:24px;

  &::after{
  //  content:'\25BC';
    position:absolute;
    width:20px;
    height:20px;
    font-size:14px;
    line-height:14px;
    font-weight:bold;
    text-align:center;
    right:12px;
    top:15px;
    color:#666;
    transform:rotateX(50deg);
  }

  &:hover{
    opacity:1;

  }


}