.component__box-filled, .component__box-filled-2, .component__box-filled-3 {
  color: black;
  width: min-content;
  height: min-content;
  position: relative;
}

.component__box-filled {
  background-color: rgb(var(--green-1));
}

.component__box-filled-2 {
  background-color: rgb(var(--green-2));
}

.component__box-filled-3 {
  background-color: rgb(var(--green-3));
}

.component__box-outline, .component__box-outline-2, .component__box-outline-3 {
  color: #fff;
  width: min-content;
  height: min-content;
  outline-offset: -2px;
}

.component__box-outline {
  outline: 2px solid rgb(var(--green-1));
  color: rgb(var(--green-1));
}

.component__box-outline-2 {
  outline: 2px solid rgb(var(--green-2));
  color: rgb(var(--green-2));
}

.component__box-outline-3 {
  outline: 2px solid rgb(var(--green-3));
  color: rgb(var(--green-3));
}

.component__box-vertical-outline, .component__box-vertical-outline-2, .component__box-vertical-outline-3 {
  color: #fff;
  width: min-content;
  height: min-content;
  outline-offset: -2px;
}

.component__box-vertical-outline {
  outline: 2px solid rgb(var(--green-1));
}

.component__box-vertical-outline-2 {
  outline: 2px solid rgb(var(--green-2));
}

.component__box-vertical-outline-3 {
  outline: 2px solid rgb(var(--green-3));
}

.component__triangle-right-3 {
  width: 0;
  height: 0;
  border-top: 32px solid rgb(var(--green-3));
  border-right: 32px solid transparent;
}

.component__with-triangle-right-3::after {
  content: '';
  position: absolute;
  top: 0;
  right: -31px;
  width: 0;
  height: 0;
  border-top: 32px solid rgb(var(--green-3));
  border-right: 32px solid transparent;
}

.component__triangle-left-3 {
  width: 0;
  height: 0;
  border-bottom: 32px solid rgb(var(--green-3));
  border-left: 32px solid transparent;
}

.component__with-triangle-left-3::after {
  content: '';
  position: absolute;
  top: 0;
  left: -31px;
  width: 0;
  height: 0;
  border-bottom: 32px solid rgb(var(--green-3));
  border-left: 32px solid transparent;
}

.component__straight-line, .component__straight-line-2, .component__straight-line-3, .component__straight-line-4 {
  min-width: 10px;
  height: 4px;
}

.component__straight-line {
  background-color: rgb(var(--green-1));
}

.component__straight-line-2 {
  background-color: rgb(var(--green-2));
}

.component__straight-line-3 {
  background-color: rgb(var(--green-3));
}

.component__straight-line-4 {
  background-color: rgb(var(--green-4));
}

.component__cover-filler {
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  background-color: white;
  transition: all 300ms;
  visibility: visible;
}

.component__plus {
  --size: 25px;
  --stroke-size: 5px;
  position: relative;
  height: var(--size);
  width: var(--size);
}

.component__plus div:nth-of-type(1) {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--stroke-size);
  background-color: var(--plus-color);
}

.component__plus div:nth-of-type(2) {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 0;
  width: var(--stroke-size);
  height: 100%;
  background-color: var(--plus-color);
}