#desktop_parts {
 display: flex;
 flex-flow: column wrap;
 align-items: baseline;
 align-content: baseline;
 gap: 8px;
 padding: 0;

 body.modern & {
  padding: calc(var(--spacing) / 2);
 }

 body.vintage & {
  background: #377f7f;
  color: white;
 }

 desktop-icon {
  display: flex;
  flex-flow: column;
  flex: 0 0 64px;
  width: 74px;
  align-items: center;
  position: relative;
  --icon-size: 32px;

  >icon-mask {
   width: var(--icon-size);
   height: var(--icon-size);
   flex: 0 0 var(--icon-size);
   position: relative;
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;

   >img {
    width: 100%;
    height: 100%;
   }
  }

  >.label {
   margin: 3px;
   text-align: center;

   body.modern & {
    flex: 1 0 34px;
    width: 74px;
    margin: 0;
    padding: 3px;
    border-radius: 4px;
   }
  }

  &[data-selected] {

   >icon-mask {
    body.vintage &::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
      linear-gradient(45deg, darkblue 25%, transparent 25%, transparent 75%, darkblue 75%, darkblue) 0 0 / 2px 2px,
      linear-gradient(45deg, darkblue 25%, transparent 25%, transparent 75%, darkblue 75%, darkblue) 1px 1px / 2px 2px;
    }
   }

   >.label {
    body.modern & {
     background-color: var(--accent-mode);
     color: var(--bg-mode-est);
    }

    body.vintage & {
     background-color: darkblue;
    }
   }
  }

  body.vintage &:focus {
   .label::before {
    border: 1px dotted white;
    mix-blend-mode: difference;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
   }
  }
 }

 #selection-box {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);

  body.modern & {
   background-color: var(--accent-mode-est);
   border: 1px solid var(--accent-mode);
   opacity: 0.75;
  }

  body.vintage & {
   background-color: transparent;
   border: 1px dotted white;
   mix-blend-mode: difference;
  }
 }
}