@import "./item-divider.vars";


// Item Divider
// --------------------------------------------------

:host {
  --padding-start: 0px;
  --padding-end: 0px;
  --padding-top: 0px;
  --padding-bottom: 0px;

  @include font-smoothing();
  @include margin(0);
  @include padding(
    var(--padding-top),
    calc(var(--padding-end) + var(--ion-safe-area-right, 0px))
    var(--padding-bottom),
    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
  );

  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: $item-divider-min-height;

  background-color: #{current-color(base)};
  color: #{current-color(contrast)};

  overflow: hidden;
  z-index: $z-index-item-divider;
  box-sizing: border-box;
}

:host([sticky]) {
  position: sticky;
  top: 0;
}

.item-divider-inner {
  @include margin(0);
  @include padding(0);

  display: flex;

  flex: 1;
  flex-direction: inherit;
  align-items: inherit;
  align-self: stretch;

  min-height: inherit;

  border: 0;

  overflow: hidden;
}

.item-divider-wrapper {
  display: flex;

  flex: 1;
  flex-direction: inherit;
  align-items: inherit;
  align-self: stretch;

  text-overflow: ellipsis;

  overflow: hidden;
}