action-sheet {
  display: flex;
  justify-content: center;
  position: absolute;
  pointer-events: none;
  height: 100%;
  width: 100%;
  z-index: 99999;
  top: 0;
  $transition-duration: 250ms;

  &.open {
    pointer-events: all;
  }

  .backdrop {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0);
    opacity: 0;
    transition: opacity $transition-duration ease;
  }

  .backdrop-fade-in {
    opacity: 0.4;
  }

  .action-sheet {
    border-radius: 10px 10px 0px 0px;
    position: absolute;
    left: 0;
    max-height: 90vh;
    width: calc(100% + 1px);
    overflow-y: scroll;
    background: white;
    box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, 0.3);

    &-top {
      border-radius: 0px 0px 10px 10px;
      top: 0;
      transform: translateY(calc(-100% + 8px));
      padding-top: 20px;
      padding-top: calc(20px + env(safe-area-inset-top));
      padding-top: -webkit-calc(20px + env(safe-area-inset-top));
    }

    &-bottom {
      border-radius: 10px 10px 0px 0px;
      bottom: 0;
      transform: translateY(calc(100% + 8px));
    }
  }

  .opened {
    transition: transform $transition-duration cubic-bezier(0, 0, 0.2, 1);
    /* visible */
    transform: translateY(0%);
  }

  .closed {
    &-bottom {
      /* completely offscreen */
      transition: transform $transition-duration cubic-bezier(0.4, 0, 1, 1);
      transform: translateY(calc(100% + 8px));
    }

    &-top {
      /* completely offscreen */
      transition: transform $transition-duration cubic-bezier(0.4, 0, 1, 1);
      transform: translateY(calc(-100% + 8px));
    }
  }
}
