.actionsheet-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  &.on {
    z-index: 100;

    .actionsheet-bottom {
      transform: translateY(0);
    }
  }

  .actionsheet-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    transition: all 0.3s;
    opacity: 0;
  }

  .actionsheet-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transition: all 0.3s;
    transform: translateY(100%);

    .action-button-container {
      background: #fff;
      padding-bottom: 15px;

      .action-button-item {
        display: inline-block;
        width: 20%;
        float: left;
        text-align: center;
        margin-top: 15px;

        img {
          width: 32px;
          height: 32px;
          font-size: 0;
        }

        .action-button-text {
          margin-top: 10px;
          font-size: 11px;
          line-height: 11px;
          color: #333;
        }
      }
    }

    .actionsheet-cancel {
      text-align: center;
      font-size: 16px;
      line-height: 50px;
      background-color: #fff;
      &:before {
        content: ' ';
        display: block;
        height: 10px;
        background-color: #f8f8f8;
      }
    }
  }
}
