@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities/functions' as *;

:host {
  // Theme variables.
  --icon-text-div-color-default: var(--pacific-60);
  --icon-text-div-color-disabled: var(--gray-60);

  // Private variables.
  --icon-text-div-color: var(--icon-text-div-color-default);
}

:host([inline]) {
  .wrap {
    display: inline;
  }

  cfpb-icon {
    // Slight offset to match inline and flex position of icon.
    top: -1px;
    position: relative;
  }
}

// Hide divider.
:host(:not([has-div])) {
  .wrap {
    gap: rem-from-px(5px);
  }

  .div {
    display: none;
  }
}

:host(:not([mobile-icon-align-end])) {
  .wrap {
    // This prevents the child button from having an empty gap after the button.
    width: fit-content;
  }
}

// Mobile only.
@include respond-to-max($bp-xs-max) {
  // Push the icon to the far right on mobile.
  :host(:not([inline])[mobile-icon-align-end]) {
    .wrap {
      display: flex;
      justify-content: right;
    }
    .text {
      width: 100%;
    }
  }

  // Hide the underline at mobile.
  :host([underline='tablet-up']) {
    .text {
      text-decoration: none !important;
    }
  }
}

:host([disabled]) {
  // !important is set so that disabled divider color overrides all other color.
  --icon-text-div-color: var(--icon-text-div-color-disabled) !important;
}

:host(:not([disabled])[underline='all']),
:host(:not([disabled])[underline='tablet-up']) {
  .text {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-style: dotted;
    text-underline-offset: 4.5px;
  }
}

// Keep LVHFA order.
:host(:not([disabled])[underline='all']:hover),
:host(:not([disabled])[underline='tablet-up']:hover) {
  .text {
    text-decoration-style: solid;
  }
}

.wrap {
  display: inline-flex;
  align-items: center;

  // Fix issue where inline-flex changes the height if there's a starting icon.
  vertical-align: top;

  gap: rem-from-px(10px);
}

.div {
  width: 1px;
  background: var(--icon-text-div-color);
  align-self: stretch;
}

.text {
  // See https://github.com/cfpb/consumerfinance.gov/pull/8252
  overflow-wrap: break-word;
}

// Shine the slot contents through to the wrap's flexbox items.
slot {
  display: contents;
}