.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.mirrored {
  transform: rotateY(180deg);
}

/* flexbox */
.flex {
  display: flex;
}

.justify-content-flex-end {
  justify-content: flex-end;
}

.align-items-flex-end {
  align-items: flex-end;
}

.align-items-flex-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.flex-1-0-0 {
  flex: 1 0 0;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-direction-column-reverse {
  flex-direction: column-reverse;
}

.justify-content-center {
  justify-content: center;
}

.move-to-end {
  margin-left: auto;
}

.gap-12 {
  gap: 12px;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

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

.text-wrap-nowrap {
  text-wrap: nowrap;
}

/* grid */
.gap {
  gap: 16px;
}

/* padding */
.padding-6 {
  padding: 6px;
}

.padding-8 {
  padding: 8px;
}

.padding-8-16 {
  padding: 8px 16px;
}

.padding-8-14 {
  padding: 8px 14px;
}

.padding-3-8 {
  padding: 3px 8px;
}

.padding-0-16 {
  padding: 0px 16px;
}

.padding-12-0 {
  padding: 12px 0px;
}

.padding-0-8 {
  padding: 0px 8px;
}

.padding-24 {
  padding: 24px;
}

.padding-right-8 {
  padding-right: 8px;
}

.padding-4-8 {
  padding: 4px 8px;
}

.padding-right-24 {
  padding-right: 24px;
}

.padding-top-bottom-6 {
  padding: 6px 0;
}

.padding-top-bottom-12 {
  padding: 12px 0;
}

.padding-bottom-12 {
  padding-bottom: 12px;
}

.padding-left-16 {
  padding-left: 16px;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-right-16 {
  padding-right: 16px;
}

/* margin */

.margin-0 {
  margin: 0;
}

.margin-auto {
  margin: auto;
}

.margin-10-0 {
  margin: 10px 0;
}

.margin-top-4 {
  margin-top: 4px;
}

.margin-top-14 {
  margin-top: 14px;
}

.margin-4 {
  margin: 4px;
}

.margin-bottom-4 {
  margin-bottom: 4px;
}

.margin-bottom-0 {
  margin-bottom: 0;
}

.margin-top-bottom-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.margin-right-8 {
  margin-right: 8px;
}

.margin-left-8 {
  margin-left: 8px;
}

.max-width-80 {
  max-width: 80%;
}

.max-width-100 {
  max-width: 100%;
}

.full-width {
  width: 100%;
}

/* border */
.border-top {
  border-top: solid black 1px;
}

.border {
  border: solid black 1px;
}

.border-width-2 {
  border-width: 2px;
}

.border-3 {
  border: solid black 3px;
}

.border-box {
  box-sizing: border-box;
}

.border-radius-16 {
  border-radius: 16px;
}

.border-radius-32 {
  border-radius: 32px;
}

.border-radius-6 {
  border-radius: 6px;
}

/* text */
.text-small {
  font-size: 0.8em;
}

.text-tiny {
  font-size: 0.6em;
}

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

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

.white-space-pre-line {
  white-space: pre-line;
}

.word-wrap-break {
  word-wrap: break-word;
}

.word-break-break-word {
  word-break: break-word;
}

@media screen and (min-width: 751px) {
  .selected {
    color: var(--primary-color);
    svg {
      fill: var(--primary-color);
    }
  }
}

.mobile-only {
  display: none;
  @media (max-width: 750px) {
    display: block;
  }
}

.height-24 {
  height: 24px;
}

.height-2-5-em {
  height: 2.5em;
}

.height-1-2-em {
  height: 1.2em;
}

.height-58 {
  height: 58px;
}

.height-128 {
  height: 128px;
}

.height-80p {
  height: 80%;
}

.height-100p {
  height: 100%;
}

.height-14 {
  height: 14px;
}

.width-14 {
  width: 14px;
}

.width-38 {
  min-width: 38px;
}

.max-height-300 {
  max-height: 300px;
}

/* position */
.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.top-50 {
  top: -50px;
}

.top-16 {
  top: -16px;
}

.top-5 {
  top: -5px;
}

.left-20 {
  left: 20px;
}

.display-none {
  display: none;
}

.resize-none {
  resize: none;
}