$action-sheet-bg: $white !default;
$action-sheet-color: $dark-black !default;
$action-sheet-font-size: 16px !default;
$action-sheet-border-radius: 16px !default;

$action-sheet-header-padding-hor: 16px !default;
$action-sheet-header-height: 53px !default;

$action-sheet-item-height: 48px !default;

$action-sheet-footer-bg: $background-gray !default;
$action-sheet-footer-btn-margin-ver: 8px !default;
$action-sheet-footer-btn-height: 48px !default;
$action-sheet-footer-btn-font-size: 16px !default;
$action-sheet-footer-btn-color: $dark-gray !default;

.mx {
  &-action-sheet {
    background-color: $action-sheet-bg;
    border-top-left-radius: $action-sheet-border-radius;
    border-top-right-radius: $action-sheet-border-radius;
    overflow: hidden;

    font-size: $action-sheet-font-size;
    color: $action-sheet-color;

    box-sizing: border-box;

    &-header {
      padding-left: $action-sheet-header-padding-hor;
      padding-right: $action-sheet-header-padding-hor;

      height: $action-sheet-header-height;

      display: flex;
      flex-direction: row;
      align-items: center;

      border-bottom: $spliter;

      &-title {
        flex: 1;
        text-align: center;
        color:$dark-gray;
        font-size: $font-size-12;
      }
    }

    &-body {
      &-action-item {
        height: $action-sheet-item-height;

        line-height: $action-sheet-header-height - 1px;
        text-align: center;

        border-bottom: $spliter;

        @include disabled();

        &:last-child {
          border-bottom: none;
          line-height: $action-sheet-item-height;
        }
      }
    }

    &-footer {
      padding-top: $action-sheet-footer-btn-margin-ver;
      background-color: $action-sheet-footer-bg;

      &-btn {
        height: $action-sheet-item-height;
        background-color: $action-sheet-bg;

        line-height: $action-sheet-footer-btn-height;
        text-align: center;
        color: $action-sheet-footer-btn-color;
      }
    }
  }
}