.c-actionsheet {
  z-index: 1048;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  -webkit-user-select: none;
  user-select: none;
  .c-actionsheet__content {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    z-index: 1;
    transform: translate(-50%, 100%);
    transition: all .3s ease;
    background: #fff;
    will-change: transform;
    border-radius: 12px 12px 0 0;
    .c-actionsheet__header {
      padding: 12px 0;
      position: relative;
      display: none;
      .c-actionsheet__title {
        color: #333;
        text-align: center;
        font-size: 14px;
        padding: 0 25px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: bold;
      }
      .c-actionsheet__description {
        color: $text-light;
        text-align: center;
        padding: 0 25px;
        font-size: 12px;
      }
      .c-actionsheet__title +
      .c-actionsheet__description {
        margin-top: 5px;
      }
      &::before {
        @include borderLine('bottom');
        border-color: $border;
      }
    }
    .c-actionsheet__options {
      padding: 0;
      button {
        list-style: none;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: rgb(0, 122, 255);
        font-size: 16px;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 25px;
        background: #fff;
        border: none;
        display: block;
        width: 100%;
        &:first-child {
          &::before {
            border-top: none;
          }
        }
        &::before {
          @include borderLine('top');
          border-color: $border;
        }
        &:active {
          background: #fafafa !important;
        }
      }
    }
    .c-actionsheet__cancel {
      text-align: center;
      line-height: 50px;
      color: rgb(0, 122, 255);
      font-size: 16px;
      border-top: 7px solid #f8f8f8;
      height: calc(50px + constant(safe-area-inset-bottom));
      height: calc(50px + env(safe-area-inset-bottom));
      &:active {
        background: #fafafa;
      }
    }
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(40, 40, 40);
    opacity: 0;
    will-change: opacity;
    transition: all .3s ease;
  }
  &.c-actionsheet__visible {
    visibility: visible;
    .c-actionsheet__content {
      transform: translate(-50%, 0);
    }
    &::before {
      opacity: .5;
    }
  }
  &.c-actionsheet__title {
    .c-actionsheet__content {
      .c-actionsheet__header {
        display: block;
      }
    }
  }
  &.c-actionsheet__options-empty {
    &.c-actionsheet__title {
      .c-actionsheet__content {
        .c-actionsheet__header {
          &::before {
            border: none;
          }
        }
      }
    }
  }
}