﻿.sockets-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }

.socket {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; }

.socket-green {
  background-image: url("/images/items/socket-green.png"); }

.socket-blue {
  background-image: url("/images/items/socket-blue.png"); }

.socket-red {
  background-image: url("/images/items/socket-red.png"); }

.socket-white {
  background-image: url("/images/items/socket-white.png"); }

.socket-abyss {
  background-image: url("/images/items/socket-abyss.png"); }

.link::before {
  content: '';
  position: absolute;
  top: -19px;
  left: 7px;
  display: block;
  width: 14px;
  height: 28px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/images/items/socket-link-vertical.png"); }

.sockets {
  display: flex;
  flex-wrap: wrap; }
  .sockets.narrow {
    width: 30px;
    flex-direction: column; }
    .sockets.narrow .socket {
      margin: 5px 0; }
      .sockets.narrow .socket:first-child {
        margin-top: 0; }
      .sockets.narrow .socket:last-child {
        margin-bottom: 0; }
  .sockets.wide {
    width: 70px;
    flex-direction: row; }
    .sockets.wide .socket {
      margin: 5px; }
      .sockets.wide .socket:first-child:last-child {
        margin: 0 20px; }
      .sockets.wide .socket:nth-child(1), .sockets.wide .socket:nth-child(2) {
        margin-top: 0; }
      .sockets.wide .socket:nth-child(odd) {
        margin-left: 0; }
      .sockets.wide .socket:nth-child(even) {
        margin-right: 0; }
      .sockets.wide .socket:nth-last-child(1), .sockets.wide .socket:nth-child(odd):nth-last-child(2) {
        margin-bottom: 0; }
      .sockets.wide .socket:nth-child(3) {
        position: relative;
        left: 40px; }
      .sockets.wide .socket:nth-child(4) {
        position: relative;
        right: 40px; }
    .sockets.wide .link:nth-child(even)::before {
      background-image: url("/images/items/socket-link-horizontal.png");
      top: 9px;
      left: -19px;
      width: 28px;
      height: 14px; }
    .sockets.wide .link:nth-child(4)::before {
      left: auto;
      right: -19px; }
