
.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;

    &.narrow {
        width: 30px;
        flex-direction: column;

        .socket {
            margin: 5px 0;

            &:first-child {
                margin-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    &.wide {
        width: 70px;
        flex-direction: row;

        .socket {
            margin: 5px;

            &:first-child:last-child {
              margin: 0 20px;
            }

            &:nth-child(1),
            &:nth-child(2) {
                margin-top: 0;
            }

            &:nth-child(odd) {
                margin-left: 0;
            }

            &:nth-child(even) {
                margin-right: 0;
            }

            &:nth-last-child(1),
            &:nth-child(odd):nth-last-child(2) {
                margin-bottom: 0;
            }

            &:nth-child(3) {
                position: relative;
                left: 40px;
            }

            &:nth-child(4) {
                position: relative;
                right: 40px;
            }
        }

        .link:nth-child(even) {
            &::before {
                background-image: url('/images/items/socket-link-horizontal.png');
                top: 9px;
                left: -19px;
                width: 28px;
                height: 14px;
            }
        }

        .link:nth-child(4) {
            &::before {
                left: auto;
                right: -19px;
            }
        }
    }
}
