@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities/index' 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);

  .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;
  }
}

: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;
  }

  .wrap:hover {
    .text {
      text-decoration-style: solid;
      text-decoration-color: var(--link-underline-hover);
    }
  }
}