@use '../style/base' as *;

@include bem(action-sheet) {
  @include b() {
    padding-bottom: env(safe-area-inset-bottom);
    border-top-left-radius: var(--sar-action-sheet-border-radius);
    border-top-right-radius: var(--sar-action-sheet-border-radius);
    background: var(--sar-action-sheet-bg);
    touch-action: none;
  }

  @include e(description) {
    @include universal;
    padding: var(--sar-action-sheet-description-padding);
    font-size: var(--sar-action-sheet-description-font-size);
    text-align: center;
    color: var(--sar-action-sheet-description-color);

    &:after {
      @include border-bottom(var(--sar-action-sheet-border-color));
    }
  }

  @include e(gap) {
    @include universal;
    height: var(--sar-action-sheet-gap-height);
    background: var(--sar-action-sheet-gap-bg);
  }

  @include e(content) {
    @include universal;
  }

  @include e(item) {
    @include universal;
    justify-content: center;
    align-items: center;
    min-height: var(--sar-action-sheet-item-min-height);
    padding: var(--sar-action-sheet-item-padding);
    cursor: pointer;

    &:not(:first-child) {
      &::before {
        @include border-top(var(--sar-action-sheet-border-color));
      }
    }

    @include m(disabled) {
      color: var(--sar-disabled-color);
    }

    @include m(disabled, loading) {
      cursor: not-allowed;
    }

    @include m-not(disabled, loading) {
      &:active {
        background: var(--sar-action-sheet-active-bg);
      }
    }
  }

  @include e(item-name) {
    @include universal;
    font-size: var(--sar-action-sheet-item-name-font-size);
  }

  @include e(item-description) {
    @include universal;
    margin-top: var(--sar-action-sheet-item-description-margin-top);
    font-size: var(--sar-action-sheet-item-description-font-size);
    color: var(--sar-action-sheet-item-description-color);
  }

  @include e(loading) {
    @include universal;
    font-size: var(--sar-action-sheet-loading-size);
    color: var(--sar-action-sheet-loading-color);
  }

  @include e(cancel) {
    @include universal;
    justify-content: center;
    align-items: center;
    min-height: var(--sar-action-sheet-cancel-min-height);
    padding: var(--sar-action-sheet-cancel-padding);
    font-size: var(--sar-action-sheet-cancel-font-size);
    cursor: pointer;

    &:active {
      background: var(--sar-action-sheet-active-bg);
    }
  }

  @include m(headless) {
    @include e(item) {
      &:first-child {
        border-top-left-radius: var(--sar-action-sheet-border-radius);
        border-top-right-radius: var(--sar-action-sheet-border-radius);
      }
    }
  }
}