import { css } from '@emotion/css';

export const ubRelative = css`
  position: relative;
`;

export const ubMb1 = css`
  margin-bottom: 0.25rem;
`;

export const ubMy1 = css`
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
`;

export const ubM0 = css`
  margin: 0;
`;

export const ubPx2 = css`
  padding-left: 0.5rem;
  padding-right: 0.5rem;
`;

export const ubPb2 = css`
  padding-bottom: 0.5rem;
`;

export const ubFlex = css`
  display: flex;
`;

export const ubItemsCenter = css`
  align-items: center;
`;

export const ubItemsStart = css`
  align-items: start;
`;

export const ubFlexAuto = css`
  flex: 1 1 auto;
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
`;

export const ubTxRightAlign = css`
  text-align: right;
`;

export const ubInlineBlock = css`
  display: inline-block;
`;

export const uAlignIcon = css`
  margin: -0.2rem 0.25rem 0 0;
`;

export const uTxEllipsis = css`
  text-overflow: ellipsis;
`;

export const uWidth100 = css`
  width: 100%;
`;

export const uTxMuted = css`
  color: #aaa;
`;

export const ubJustifyEnd = css`
  justify-content: flex-end;
`;
