@import "./list-header";
@import "./list-header.ios.vars";

// iOS List Header
// --------------------------------------------------

:host {
  --background: #{$list-header-ios-background-color};
  --color: #{$list-header-ios-color};
  --border-color: #{$item-ios-border-bottom-color};

  /* stylelint-disable */
  @include ltr() {
    padding-right: var(--ion-safe-area-right);
    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start});
  }

  @include rtl() {
    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$list-header-ios-padding-start});
    padding-left: var(--ion-safe-area-left);
  }
  /* stylelint-enable */

  position: relative;

  align-items: flex-end;

  font-size: $list-header-ios-font-size;
  font-weight: $list-header-ios-font-weight;

  letter-spacing: $list-header-ios-letter-spacing;
}

// List Header: Slotted Components
// --------------------------------------------------

::slotted(ion-button),
::slotted(ion-label) {
  @include margin(29px, null, 6px);
}

::slotted(ion-button) {
  --padding-top: 0;
  --padding-bottom: 0;

  @include margin(null, 3px);

  min-height: 1.4em;
}


// List Header Lines
// --------------------------------------------------

// Full lines - apply the border to the list header
// Inset lines - apply the border to the list header inner
:host(.list-header-lines-full) {
  --border-width: #{0 0 $item-ios-border-bottom-width 0};
}

:host(.list-header-lines-inset) {
  --inner-border-width: #{0 0 $item-ios-border-bottom-width 0};
}