:root {
    --box-size: 260px
}

html {
    overflow: hidden;
}

.container {
    width: 400px;
    height: 400px;
    background: repeating-linear-gradient(
        45deg,
        white,
        white 16px,
        black 16px,
        black 19px
    );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.container-center {
    position: absolute;
    height: var(--box-size);
    width: var(--box-size);
    background-color: rgb(40, 40, 40);

    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 10px 10px 20px;
}


@property --open-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 15px;
}

@property --face-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 15px;
}

.shape {
    /* constants */
    --sin30: 0.5;
    --sin60: 0.866;
    --tan30: 0.5774;

    --light: rgb(220, 220, 220);
    --medium: rgb(180, 180, 180);
    --dark: rgb(140, 140, 140);

    position: relative;
    left: 50%;
    top: 55% ;

    transition: --open-width 200ms linear, --face-width 200ms linear;
}

.container-center:hover {
    --open-width: 20px;
    --face-width: 20px;
}

.side {
    transform-origin: 0;
}

.side div {
    transition: background-color 200ms linear;
}

.long {
    position: absolute;
    /* set the height to width and vice versa to avoid a rotation */
    height: var(--face-width);
    width: calc(
        2 * (((var(--open-width) + (2 * var(--face-width))) / var(--tan30))
        - (2 * var(--face-width) * var(--tan30))
        )
    );
    transform: translate(
        calc(0px
        /* correct for skew */
        - (var(--face-width) * var(--sin30) / 2)
        - (var(--open-width) / var(--tan30))
        - ((var(--face-width) / var(--sin60)) + (var(--face-width) * var(--tan30)))
        - 1px
        ),
        calc(
            var(--open-width) + var(--face-width)
        )
    ) skew(-30deg)
}

.short {
    position: absolute;
    height: var(--face-width);
    width: calc(
        2 * (((var(--open-width) + var(--face-width)) / var(--tan30))
        - (1 * var(--face-width) * var(--tan30))
        )
    );

    transform: translate(
        calc(0px
        /* correct for skew */
        - (var(--face-width) * var(--sin30) / 2)
        - (var(--open-width) / var(--tan30))
        - 1px
        ),
        var(--open-width)
    ) skew(-30deg)
}

.side:nth-of-type(2) {
    transform: rotate(120deg);
}

.side:nth-of-type(3) {
    transform: rotate(-120deg);
}

.face-1 {
    background-color: var(--dark);
}

.shape:hover .face-1 {
    background-color: var(--medium);
}

.face-2 {
    background-color: var(--light);
}

.shape:hover .face-2 {
    background-color: var(--dark);
}

.face-3 {
    background-color: var(--medium);
}

.shape:hover .face-3 {
    background-color: var(--light);
}