skuvaWeb

<div class="block">
 <div class="block__btn"></div>
 <div class="block__text"></div>
</div>

<div class="block block--notDefaultBtn">
 <div class="block__btn"></div>
 <div class="block__text"></div>
</div>

overflow: hidden;
heigth: 0;
position: absolute;
z-index: -1;

input:focus + .icon{
  opacity: 1;
}

.overlay{
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0 , .8);
  overflow-y: auto;
  z-index: -2;
  opacity: 0;
  transition: .3s;
  display: flex;
  &.active{
    z-index: 9;
    opacity: 1;
  }
}

.modal{
  margin: auto;
  position: relative;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  background-color: #fff;
  opacity: 0;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  transition: .3s;
  transition-delay: .3s;
  &.active{
    opacity: 1;
    transform: translateY(0%);
  }
}