
.arrow,
.arrow::before {
  @apply -absolute;
  width: calc(var(--arrow-size) * 1.4142);
  height: calc(var(--arrow-size) * 1.4142);
  background: inherit;
}

.arrow {
  @apply -invisible;
  --arrow-size: 5px;
}

.arrow::before {
  content: '';
  border: inherit;
  @apply -rotate-45 -visible;
}

.arrow-top,
.arrow-up {
  top: calc(1px - var(--arrow-size));
  border-bottom: inherit;
  border-right: inherit;
  border-width: 1px 0 0 1px;
}

.white > .arrow-top,
.white > .arrow-up {
  top: calc(0px - var(--arrow-size));
}

.arrow-bottom,
.arrow-down {
  bottom: calc(1px - var(--arrow-size));
  border-top: inherit;
  border-left: inherit;
  border-width: 0 1px 1px 0;
}

.white > .arrow-bottom,
.white > .arrow-down {
  bottom: calc(0px - var(--arrow-size));
}

.arrow-left {
  left: calc(1px - var(--arrow-size));
  border-top: inherit;
  border-right: inherit;
  border-width: 0 0 1px 1px;
}

.white > .arrow-left {
  left: calc(0px - var(--arrow-size));
}

.arrow-right {
  right: calc(1px - var(--arrow-size));
  border-bottom: inherit;
  border-left: inherit;
  border-width: 1px 1px 0 0;
}

.white > .arrow-right {
  right: calc(0px - var(--arrow-size));
}
