/*
UTILITIES ------------------------------------------------------------------------------------------
Display-related utilities
*/

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

.box-transparent {
  background-color: transparent;
}

.hr-tight {
  margin: 0.75rem 0;
}

.is-active-line-item {
  color: $interactive-secondary;
  @extend .has-background-white-ter;
}

.is-active-line-item-bordered {
  border-left-color: $interactive-secondary;
  border-left-width: 2px;
  border-left-style: solid;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.grayscale {
  /*
    We can turn this into a function or make more classes for specific grayscale values
    if we end up with the need for values below 100.
  */
  filter: grayscale(100%);
}

.inset-overflow-shadow {
  /* These values reflect Bulma's .box box-shadow only inset and at .2 vs .1 opacity */
  box-shadow: inset 0px -3px 1px -2px rgba(10, 10, 10, 0.2);
}

/*
UTILITIES - SPACING --------------------------------------------------------------------------------
*/

.is-fill-space {
  position: absolute;
  width: 100%;
  height: 100%;
}

.mt-05r {
  margin-top: 0.5rem;
}

.mt1r {
  margin-top: 1rem;
}

.mb1r {
  margin-bottom: 1rem;
}

.mb-05r {
  margin-bottom: 0.5rem;
}

.ml-05r {
  margin-left: 0.5rem;
}

.mr-025r {
  margin-right: 0.25rem;
}

.mr-05r {
  margin-right: 0.5rem;
}

.ml1r {
  margin-left: 1rem;
}

.mr1r {
  margin-right: 1rem;
}

.v-min-2r {
  min-height: 2rem;
}

.v-min-4-5r {
  min-height: 4.5rem;
}
