/* Settings */
:root {
	--dotsize: 25px;
	--dotborder: 2px;
	--linkwidth: 1px;
	--linkfade: 0.15;
}

.context {
	height: 20em;
}

/* Dot Styles */
.dot {
  background: #fff;
  width: var(--dotsize);
  height: var(--dotsize);
  
  border: var(--dotborder) solid #333;
  border-radius: 100%;
  box-shadow: 0px 0px 3px white;
  
  position: relative;
  
  cursor: default;
  transition: border-color 0.2s;
    
  &:hover ~ .link {
    opacity: var(--linkfade);
  }
  
  &:after {
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s;
    content: attr(data-dot-name);
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 1.5em;
    width: 6em;
    
    display: inline-block;
    background: #333;
    border-radius: 4px;
    
    position: absolute;
    left: -2em;
    right: -2em;
    top: 120%;
    margin: auto;
  }
  
  &:hover:after {
    opacity: 1;
    top: 130%;
  }
}

/* Links */
.link {
  display: block;
  height: var(--linkwidth);
  margin-top: (0 - (var(--linkwidth) / 2));
  
  background: #333;
  border-radius: (var(--linkwidth) / 2);

  position: absolute;
  /*transform-origin: 0 (var(--linkwidth) / 2);*/
  transform-origin:top left;
  transition: opacity 0.2s;
  box-shadow: 0px 0px 21px red;
  
  &.double {
    height: (var(--linkwidth) * 2);
    margin-top: (0 - var(--linkwidth));
    background: none;
    
    .top,
    .bottom {
      width: 100%;
      height: (var(--linkwidth));
      top: 0;
      margin: 0;
    }
    
    .bottom {
      top: var(--linkwidth);
    }
  }
  
  &.triple {
    height: (var(--linkwidth) * 3);
    margin-top: (0 - (var(--linkwidth) * 1.5));
    background: none;
    
    .top,
    .middle,
    .bottom {
      width: 100%;
      height: (var(--linkwidth));
      top: 0;
      margin: 0;
    }
    
    .middle {
      top: var(--linkwidth);
    }
    
    .bottom {
      top: (var(--linkwidth) * 2);
    }
  }
  
  .filtered & {
    opacity: var(--linkfade);
    
    &.double,
    &.triple,
    &.filtering {
      opacity: 1;
    }
  }
}

/* Z-Index */
.dot {
  z-index: 3;
}

.link {
  z-index: 1;
}

/* Dot Positions */
.dot[data-dot-name='bus'] {
  top: 12%;
  left: 10%;
}

.dot[data-dot-name='postbox'] {
  top: 60%;
  left: 60%;
}

.dot[data-dot-name='apple'] {
  top: 70%;
  left: 20%;
}

.dot[data-dot-name='sky'] {
  top: 14%;
  left: 75%;
}

.dot[data-dot-name='sea'] {
  top: 22%;
  left: 48%;
}

/* Make filters look reasonably nice eh */
.filters {
  position: absolute;
  bottom: 40px;
  right: 15px;
  width: 90px;
  
  list-style: none;
  margin: 0; padding: 0;
  
  .filter {
    line-height: 30px;
    background: #333;
    color: fadeout(#000, 40%);
    padding: 0 8px;
    border-radius: 2px;
    margin-bottom: 2px;
    transition: all 0.2s;
    cursor: default;
    
    &:hover {
      color: #fff;
      background: #333;
    }
  }
}

/* Colours */
.filter,
.link {
  background: hsl(000, 70%, 70%);
}