@action-sheet-border-radius: 2px;
@action-sheet-title-color: #888;
@action-sheet-title-padding: 10px 16px;
@action-sheet-title-font-size: 14px;
@action-sheet-action-item-height: 48px;
@action-sheet-action-item-padding: 0px 18px;
@action-sheet-action-item-color: #333;
@action-sheet-action-item-disabled-color: var(--color-text-disabled);
@action-sheet-icon-margin: 0 20px 0 0;
@action-sheet-icon-size: 24px;
@action-sheet-background: #fff;

:root {
  --action-sheet-border-radius: @action-sheet-border-radius;
  --action-sheet-title-color: @action-sheet-title-color;
  --action-sheet-title-padding: @action-sheet-title-padding;
  --action-sheet-title-font-size: @action-sheet-title-font-size;
  --action-sheet-action-item-height: @action-sheet-action-item-height;
  --action-sheet-action-item-padding: @action-sheet-action-item-padding;
  --action-sheet-action-item-color: @action-sheet-action-item-color;
  --action-sheet-action-item-disabled-color: @action-sheet-action-item-disabled-color;
  --action-sheet-icon-margin: @action-sheet-icon-margin;
  --action-sheet-icon-size: @action-sheet-icon-size;
  --action-sheet-background: @action-sheet-background;
}

.var-action-sheet {
  padding: 10px 0;
  max-height: 80%;
  background: var(--action-sheet-background);
  transition: background-color 0.25s;

  &__popup-radius {
    border-radius: var(--action-sheet-border-radius);
  }

  &__title {
    padding: var(--action-sheet-title-padding);
    color: var(--action-sheet-title-color);
    font-size: var(--action-sheet-title-font-size);
  }

  &__action-item {
    display: flex;
    align-items: center;
    height: var(--action-sheet-action-item-height);
    padding: var(--action-sheet-action-item-padding);
    color: var(--action-sheet-action-item-color);
    cursor: pointer;
  }

  &__action-name {
    overflow: auto;
    max-height: var(--action-sheet-action-item-height);
  }

  &__action-icon[var-action-sheet-cover] {
    margin: var(--action-sheet-icon-margin);
    width: var(--action-sheet-icon-size);
    height: var(--action-sheet-icon-size);
    font-size: var(--action-sheet-icon-size);
  }

  &--disabled {
    color: var(--action-sheet-action-item-disabled-color) !important;
    cursor: not-allowed;
  }
}