/*
    UI elements
-------------------------------
*/

.box {
  box-decoration-break: clone;
}

.pill {
  border-radius: var(--unit-infinity);
  box-decoration-break: clone;
}

.pill-list *:first-child .pill-item {
  border-radius: var(--unit-infinity) 0 0 var(--unit-infinity);
}

.pill-list *:last-child .pill-item {
  border-radius: 0 var(--unit-infinity) var(--unit-infinity) 0;
}

.rnd {
  border-radius: var(--unit);
}

.rnd-0 {
  border-radius: 0;
}

.rnd-s {
  border-radius: var(--unit-s);
}

.rnd-m {
  border-radius: var(--unit-m);
}

.rnd-l {
  border-top-left-radius: var(--unit);
  border-bottom-left-radius: var(--unit);
}

.rnd-r {
  border-top-right-radius: var(--unit);
  border-bottom-right-radius: var(--unit);
}

.rnd-t-s {
  border-top-left-radius: var(--unit-s);
  border-top-right-radius: var(--unit-s);
}

.rnd-b-s {
  border-bottom-left-radius: var(--unit-s);
  border-bottom-right-radius: var(--unit-s);
}

.rnd-l-s {
  border-top-left-radius: var(--unit-s);
  border-bottom-left-radius: var(--unit-s);
}

.rnd-r-s {
  border-top-right-radius: var(--unit-s);
  border-bottom-right-radius: var(--unit-s);
}

.rnd-br-s {
  border-bottom-right-radius: var(--unit-s);
}

.rnd-xs {
  border-radius: var(--unit-xs);
}

.rnd-t-xs {
  border-top-left-radius: var(--unit-xs);
  border-top-right-radius: var(--unit-xs);
}

.rnd-l-xs {
  border-top-left-radius: var(--unit-xs);
  border-bottom-left-radius: var(--unit-xs);
}

.rnd-bl-xs {
  border-bottom-left-radius: var(--unit-xs);
}

.rnd-r-xs {
  border-top-right-radius: var(--unit-xs);
  border-bottom-right-radius: var(--unit-xs);
}

.border-b {
  border-bottom: var(--unit-px) solid var(--color-alt);
  margin-bottom: calc(var(--unit) - var(--unit-px));
}

.border-l {
  border-left: var(--unit-px) solid var(--color-neutral);
}

.border-t {
  border-top: var(--unit-px) solid var(--color-alt);
}

.border-b-s:not(:last-child) {
  border-bottom: var(--unit-px) solid var(--color-alt);
  /* margin-bottom: calc(-1 * var(--unit-px)); */
}

.border-t-r {
  border-top: var(--unit-px) solid var(--color-alt);
  border-right: var(--unit-px) solid var(--color-alt);
}

.border {
  box-shadow: 0 0 0 var(--unit-px) var(--color-alt);
}

.border-neutral {
  box-shadow: inset 0 0 0 var(--unit-px) var(--color-neutral);
}

.border-inverse {
  box-shadow: inset 0 0 0 var(--unit-px) var(--color-inverse);
}

.border-bg {
  box-shadow: inset 0 0 0 var(--unit-px) var(--color-bg);

  /* border: solid var(--unit-xxs) var(--color-bg); */
}

.shadow {
  box-shadow: var(--unit-xs) var(--unit-xs) var(--unit) var(--color-neutral-transparent);
}

.shadow-inset {
  box-shadow: inset var(--unit-xs) var(--unit-xs) var(--unit) var(--color-neutral);
}

.fixed-width {
  width: calc(var(--col-width) * 1 / 4);
  display: inline-block;
}
