@import url("/assets/components/buttons_and_links/link_colors-26b14a3e.css");

.link {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  transition: all 0.4s ease-in;
  white-space: nowrap;
  width: fit-content;

  & > * {
    transition: inherit;
  }

  &.link-sm {
    font-size: 0.875rem;
    line-height: 1rem;
  }

  &.link-full {
    width: 100%;
  }

  &.link-inline {
    display: inline-flex;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  &.link-underline {
    text-decoration: underline;
  }

  &.link-wrap{
    white-space: normal;
  }

  &.link-back {
    @media screen and (max-width: 768px) {
      span {
        display: none;
      }
    }
  }

  &.link-close {
    margin-left: auto;
    padding: 0;

    @media screen and (max-width: 768px) {
      .link__text {
        display: none;
      }
    }
  }

  /* Close button for modals and modal-like forms. */
  /* Attaches the link element to the top-right of the parent container. */
  &.link--modal {
    position: absolute;
    padding: 0 !important;
    right: 0;
  }

  &.truncate, & .truncate {
    white-space: break-spaces;
  }
}

.link__text {
  @media screen and (max-width: 768px) {
    display: none;
  }
}