@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin absolute-center-x-y {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin absolute-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin absolute-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
@mixin zero-width-space {
  &::before {
    content: '\200B';
    user-select: none;
    width: 0;
    height: 0;
  }
}

// Placing content before and after the container stops the margin of inner elements from overflowing
@mixin ignore-children-margin {
  &::after,
  &::before {
    content: '\a0';
    display: block;
    visibility: hidden;
    height: 0;
  }
}

@mixin invisible-container-overlay {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: inherit;

  // Puts the element behind the parent while keeping it visible so that
  // it allows `click` events to propagate up.
  z-index: -1;
}

@mixin box-sizing {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
}