/* PIXEL INPUT */

.left-input-endcap {
  position: relative;
}

/* smaller endcap */
.left-input-endcap::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 25px;
  background-color: var(--color-main-white);
  border: solid var(--color-black);
  border-width: 3px 0 3px 3px;
  position: absolute;
  transform: translateX(-6px);
  z-index: 2;
  margin-top: 6px;
  margin-left: 6px;
}

/* bigger endcap */
.left-input-endcap::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 31px;
  background-color: var(--color-main-white);
  border: solid var(--color-black);
  border-width: 3px 0 3px 3px;
  position: absolute;
  transform: translateX(-3px);
  z-index: 1;
  margin-top: 3px;
  margin-left: 6px;
}

.pixel-input {
  display: flex;
  justify-content: start;
  align-items: start;
  padding: 0;
  margin: 0 0 3px;
}

.pixel-input .main-input {
  background-color: var(--color-main-white);
  border: solid var(--color-black);
  border-width: 3px;
  padding: 10px;
  display: flex;
  max-width: 100%;
  width: 100%;
  font-size: 18px;
  line-height: 18px;
  height: 37px;
  margin-left: 6px;
  margin-right: 6px;

  &[type="number"] {
    padding: 10px 5px 10px 10px;
  }
}

.pixel-input .main-input::placeholder {
  font-size: 18px;
  line-height: 18px;
}

.right-input-endcap {
  position: relative;
}

/* bigger endcap */
.right-input-endcap::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 31px;
  background-color: var(--color-main-white);
  border: solid var(--color-black);
  border-width: 3px 3px 3px 0;
  position: absolute;
  transform: translateX(-3px);
  z-index: 1;
  margin-top: 3px;
  margin-left: -6px;
}

/* smaller endcap */
.right-input-endcap::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 25px;
  background-color: var(--color-main-white);
  border: solid var(--color-black);
  border-width: 3px 3px 3px 0;
  position: absolute;
  transform: translateX(0);
  z-index: 2;
  margin-top: 6px;
  margin-left: -6px;
}

.pixel-popover {
  position: absolute;
  border: 3px solid var(--color-black);
  background-color: var(--color-gray-300);
  z-index: 3;
  display: flex;
  transform: translateY(calc(-50% - 6px));
  white-space: nowrap;
  margin-left: 26px;
}

/* smaller endcap */
.left-popover-endcap::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: calc(100% - 6px);
  background-color: var(--color-gray-300);
  border: solid var(--color-black);
  border-width: 3px 0 3px 3px;
  position: absolute;
  transform: translateX(-9px);
  z-index: 2;
}

/* bigger endcap */
.left-popover-endcap::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 100%;
  background-color: var(--color-gray-300);
  border: solid var(--color-black);
  border-width: 3px 0 3px 3px;
  position: absolute;
  transform: translateX(-6px);
  z-index: 1;
}

/* bigger endcap */
.right-popover-endcap::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 100%;
  background-color: var(--color-gray-300);
  border: solid var(--color-black);
  border-width: 3px 3px 3px 0;
  position: absolute;
  z-index: 1;
}

/* smaller endcap */
.right-popover-endcap::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: calc(100% - 6px);
  background-color: var(--color-gray-300);
  border: solid var(--color-black);
  border-width: 3px 3px 3px 0;
  position: absolute;
  transform: translateX(3px);
  z-index: 2;
}