*, *::before, *::after {
   box-sizing:border-box;
   font-family:Saira;
}

:root {
   --border-radius:7px;
   --color-basic:DodgerBlue;
   --color-basic-dark:#0073e6;
   --color-focus:LimeGreen;
   --color-focus-dark:#28a428;
   --color-secondary:Silver;
	
	--number:2;

	background-color:#e1ddd9;
}



/***********/
/* general */
/***********/
body > * {
   max-width:20em;
	 margin:.5em auto;
}

h1 {
   font-size:2.25em;
   font-weight:normal;
   text-align:center;
}

label {
   line-height:2.25em;
}

button {
   display:inline-block;
   line-height:2.25em;
   padding:0;
   font-size:inherit;
   apperence:none;
   outline:none;
   background:none;
   border:none;
   border-radius:var(--border-radius);
   cursor:pointer;
}

/****************/
/* het sorteren */
/****************/
form {
   display:grid;
   grid-template-columns:max-content 1fr 1fr 1fr;
   grid-gap:.25em;
}

form button {
   background-color:var(--color-secondary);
}

form button:focus {
   background-color:var(--color-focus);
}

/************/
/* de lijst */
/************/
ul {
   list-style:none;
   padding:0;
   
   display:grid;
   grid-gap:.125em;
}

/* de items */
li {
   padding:.375em .375em .375em 2.25em;
   background:var(--color-basic) repeating-linear-gradient(
      transparent 0,
      transparent 2px,
      var(--color-basic-dark) 2px,
      var(--color-basic-dark) 4px,
      transparent 4px,
      transparent 6px
   ) .5em center / 1em calc(100% - 2em) no-repeat;
   border-radius:var(--border-radius);
   outline:none;
   transition:opacity .2s linear, transform .2s linear;
   
   display:grid;
   grid-template-columns:1fr min-content;
   grid-template-rows:min-content min-content;
}

li:focus, li:focus-within {
   background-color:var(--color-focus);
   background-image:repeating-linear-gradient(
      transparent 0,
      transparent 2px,
      var(--color-focus-dark) 2px,
      var(--color-focus-dark) 4px,
      transparent 4px,
      transparent 6px
   );
}

li.moving {
   opacity:0;
   transform:rotateX(90deg);
}

/* de itemnaam */
li div {
   grid-row:1/3;
   align-self:center;
   font-size:1.5em;
   text-transform:uppercase;
}

li div::first-letter {
   padding-right:.25em;
}

/* de itembuttons */
li button {
   width:2.25em;
   transform:rotate(-90deg);
   grid-column:2/3;
}

li button:last-child {
   transform:rotate(-90deg) scaleX(-1);
}

li button:focus {
   background-color:var(--color-focus-dark);
}

/*****************/
/* drag and drop */
/*****************/
.sortableGhost,
.sortableDrag,
.sortableDrag:focus {
   background-color:var(--color-focus);
}

.sortableGhost,
.sortableDrag button {
   opacity:0;
}