@use "variables/breakpoints";
@use "variables/sizes";

.overflow-auto-y {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

/**
 *
 */
.pointer {
  cursor: pointer;
}

/**
 * Displays a text so that when it would overflow ellipsis (...) are shown instead
 */
.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * Hide the element that this is applied on when on a mobile device
 */
.hide-mobile {
  @media screen and (max-width: breakpoints.$md) {
    display: none;
  }
}

/**
 * Display the cursor as a pointer and underline the element which has entitylinked when hovered
 */
.clickable {
  pointer-events: all;
  cursor: pointer;
}
.clickable:hover {
  text-decoration: underline;
}

/*
 * Hide the element that this is applied on when on a desktop device
 */
.hide-desktop {
  @media screen and (min-width: breakpoints.$md) {
    display: none;
  }
}

.text-align-end {
  text-align: end;
}

.position-relative {
  position: relative;
}

/* Using this class, the calculated width of the element will include padding and the border
as opposed to just the width of the element */
.border-box-sizing {
  box-sizing: border-box;
}

.hint-text {
  font-size: 0.75em;
  color: rgba(0, 0, 0, 0.6); // Slightly lighter color for hints
  line-height: normal;
  margin-top: sizes.$small;
}
