@charset "UTF-8";

:root {
  --RemovableList-cross-view: 0.7em;
  --RemovableList-cross-hit: 2.5em;
  --RemovableList-text-padding: 1em;
  --RemovableList-text-height: 1.2em;
}


.RemovableList-container {
  padding: 0.5em;
}


.RemovableList-item {
  position: relative; /* For .RemovableList-cross */

  padding: var(--RemovableList-text-padding);
  padding-right: calc(var(--RemovableList-text-padding) * 2 + var(--RemovableList-cross-hit));
  border-bottom: 1px solid hsl(0, 0%, 50%);

  word-break: break-all;
  line-height: var(--RemovableList-text-height);
}
.RemovableList-item:last-child {
  border-bottom: none;
}


.RemovableList-cross {
  position: absolute;
  top: calc(var(--RemovableList-text-padding) + (var(--RemovableList-text-height) - var(--RemovableList-cross-hit)) / 2);
  right: var(--RemovableList-text-padding);
  width: var(--RemovableList-cross-hit);
  height: var(--RemovableList-cross-hit);

  /* Disable <button> original style */
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;

  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s;
}
.RemovableList-cross:hover {
  opacity: 0.4;
}
.RemovableList-cross::before, .RemovableList-cross::after {
  position: absolute;
  top: calc(var(--RemovableList-cross-hit) / 2 - 1px);
  /* (move left edge) + (move to center) */
  left: calc((-1 * var(--RemovableList-cross-view) * 1.4 / 2) + (var(--RemovableList-cross-hit) / 2));

  display: block;
  width: calc(var(--RemovableList-cross-view) * 1.4);   /* 1.4 as sqrt(2) */
  border-bottom: 2px solid hsl(0, 0%, 40%);

  content: "";
}
.RemovableList-cross::before {
  transform: rotate(45deg);
}
.RemovableList-cross::after {
  transform: rotate(-45deg);
}