@use '../../../scss/base/variables' as var;
@use '../../../scss/base/mixins' as *;

.arrow {
  border: solid var(--dark-purple);
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2px;
  transform: rotate(-45deg);
}

.flexBase {
  display: flex;
  gap: 8px;
}

.breadcrumbPopoverContainer {
  @extend .flexBase;
  flex-direction: column;
}

// Increase specificity to override Button's unstyled class
button.popoverOption {
  @extend .flexBase;
  align-items: baseline;
  font-size: var(--font-size-12);
  cursor: pointer;
  @media only screen and (min-width: var.$breakpoint-md) {
    line-height: 12px;
    padding: 8px;
    transition: all 0.25s ease-in-out;
    &:hover {
      background: var(--light-blue);
    }
  }
}

.popoverOptionText {
  display: contents;
}

.lIcon {
  position: relative;
  left: 1px; // Needed to properly align to the element above it
  top: -1px; // Needed to be centered with the content to the right. This is due to the `align-items: baseline` from above.
  svg {
    // Using 6px height and width for the 'L' icon. Our minimum size of 8px is too large for this. UX suggested that we keep 6px.
    width: 6px !important;
    height: 6px !important;
  }
}

.container {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-16);
}

.underline {
  white-space: nowrap;
  position: relative;
  // Unique padding to give proper spacing between the text and the underline
  padding-bottom: 3px;
  &::after {
    content: '';
    width: 100%;
    position: absolute;
    height: 2px;
    bottom: 0;
    left: 0;
    background: var(--dark-purple);
    border-radius: 4px;
  }
}

.small {
  font-size: var(--font-size-12);
}

.tooltipText {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
}