@import "main.css";


body{
  padding: 1em 1em;
  width: 60em;
}

div.compo {
  margin: 0.2em 0em;
  padding: 0.3em;
  border: 1px solid transparent;
  background-color: #eeeeee;
}

.compo>.content {
  float: left;
  margin-left: 0.5em;
}

.trash {
  float: right;
  margin-left: 0.5em;
  font-size: 2em;
  font-weight: bold;
  cursor:default;
  margin-top: -0.2em;
  background-color: transparent;
}

.plus {
  margin-left: 0.5em;
  margin-top: 0.5em;
  font-size: 2.5em;
  cursor:default;
  width: 0em;
}

/*
#######################
##   F L E C H E S   ##
#######################
*/

.arrow {
  width: 0;
  height: 0;
  --size: 14px;
  --colorArrow: var(--colorFg2);
  --margin: 3px;
}

.arrow:hover {
  --colorArrow: var(--colorFg1);
}

.arrow:active {
  --colorArrow: var(--colorFg3);
}

.direction, .direction>div {
  float: left;
}

.arrow-left {
  border-top: var(--size) solid transparent;
  border-bottom: var(--size) solid transparent;
  border-right: var(--size) solid var(--colorArrow);
  margin-top: var(--margin);
}

.arrow-up {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid var(--colorArrow);
  margin-left: var(--margin);
}

.arrow-down {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid var(--colorArrow);
  margin-left: var(--margin);
  margin-top: calc(var(--margin)*2);
}

.arrow-right {
  border-top: var(--size) solid transparent;
  border-bottom: var(--size) solid transparent;
  border-left: var(--size) solid var(--colorArrow);
  margin-left: var(--margin);
  margin-top: var(--margin);
}