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

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

  @include e(header) {
    @include universal;
    padding: var(--sar-share-sheet-header-padding);

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

  @include e(title) {
    @include universal;
    font-size: var(--sar-share-sheet-title-font-size);
    font-weight: var(--sar-font-bold);
    text-align: center;
  }

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

  @include e(row) {
    @include universal;

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

  @include e(row-content) {
    @include universal;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: var(--sar-share-sheet-row-padding-y)
      var(--sar-share-sheet-row-padding-x);
  }

  @include e(item) {
    @include universal;
    justify-content: flex-start;
    align-items: center;
    width: var(--sar-share-sheet-item-width);
    flex: none;
    cursor: pointer;

    @include m-not(disabled) {
      &:active {
        opacity: var(--sar-share-sheet-item-active-opacity);
      }
    }

    @include m(disabled) {
      @include disabled;
    }
  }

  @include e(icon-wrapper) {
    @include universal;
    justify-content: center;
    align-items: center;
    width: var(--sar-share-sheet-icon-wrapper-size);
    height: var(--sar-share-sheet-icon-wrapper-size);
    border-radius: var(--sar-share-sheet-icon-wrapper-border-radius);
    font-size: var(--sar-share-sheet-icon-font-size);
    color: var(--sar-share-sheet-icon-color);
    background-color: var(--sar-share-sheet-icon-bg);
  }

  @include e(image) {
    @include universal;
    width: 100%;
    height: 100%;
    border-radius: var(--sar-share-sheet-icon-wrapper-border-radius);
  }

  @include e(item-name) {
    @include universal;
    margin-top: var(--sar-share-sheet-name-margin-top);
    padding: 0 var(--sar-share-sheet-name-padding-x);
    font-size: var(--sar-share-sheet-name-font-size);
    color: var(--sar-share-sheet-name-color);
  }

  @include e(item-description) {
    // @include universal;
    margin-top: var(--sar-share-sheet-item-description-margin-top);
    padding: 0 var(--sar-share-sheet-item-description-padding-x);
    font-size: var(--sar-share-sheet-item-description-font-size);
    color: var(--sar-share-sheet-item-description-color);
  }

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

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

    &:active {
      background-color: var(--sar-share-sheet-cancel-active-bg);
    }
  }

  @include m(titled) {
    @include e(description) {
      margin-top: var(--sar-share-sheet-description-margin-top);
    }
  }
}