@import "bus.sprites.css";
@import "bus.selection.css";
@import "bus.kaleidoscope.css";

:root {
    --dx: -42px;
    --δr: 38px;
    --dy: -47px;
    --bg: silver;
}

label { cursor: hand; }
.tile,.picker label { background-image: url(tiles.png); min-width: 7px; min-height: 47px; }

.bus input, #port, #ddd {
    position: absolute;
    left: -9999px;
}
.bus .left input, .bus .front input {
    right: -9999px;
    left: initial;
}
.bus .front input {
    
}

.shadow label {
    display: inline-flex;
    flex-direction: column;
    min-height: 47px;
    justify-content: space-between;
    align-items: center;
    vertical-align: bottom;
    position: relative;
}

.shadow label .bottom {
    position: absolute;
    bottom: 0;
}

.picker {
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 998;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 1px;
    background-color: silver;
    opacity: 0.8;
    transition: background-color 0.5s;
    margin-top: -7px;
    transform-origin: top left;
    transform: scale(0.75);
}

.picker .spot, .picker .t, .picker .j, .picker .h, .picker .f, .picker .r {
    transform-origin: top left;
}

.picker .conditional ~ label {
    transform-origin: bottom left;
    min-height: 17px; max-height: 17px;
}
.picker .w  { min-height: 20px; }
.picker label:hover {
    background-color: white;
    transform: scale(2);
    position: relative;
    z-index: 998;
}

.picker label { display: inline-block; margin: 1px; } 
.picker .blank { min-height: 17px; max-height: 17px; width: 16px; }

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation { to { opacity: 0.2; } }
@-webkit-keyframes blink-animation { to { opacity: 0.2; } }

.open:checked ~ .shadow { background-color: #faa; opacity: 0.8; }
.picker,
.open:checked ~ .shadow label[for$="open"],
.shadow label[for$="close"] { display: none; }

.open:checked ~ .picker { display: block; animation: fadeIn 0.5s; }
.open:checked ~ .shadow label[for$="close"] { display: inline-flex; animation: fadeIn 0.5s; }
@keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 0.8; }
}

.slot,
.tile { display: inline-block; }
.blank { background-position: calc(var(--dx) * 7 - 1px) calc(var(--dy) * 4); width: 22px; }

/*exceptions and quircks */
:checked[value="a2"] ~ .shadow .bottom { left: 5px; }/* Left-align rear axle */
.left.face :checked[value="a2"] ~ .shadow .bottom { right: 5px; left: initial; }/* Right-align in mirror view. */
.bus-view .a5 { margin-left: -15px !important; padding-left: 15px !important; }
.bus-view .left.side .a5 { margin-left: -15px !important; padding-left: 15px !important; }
:checked[value="a5"] ~ .shadow .bottom { right: 1px; }/* Right-align front axle */
.left.face :checked[value="a5"] ~ .shadow .bottom { left: 1px; right: initial; }/* Left-align in mirror view. */
.left.face :checked[value="l5"] ~ .shadow .bottom { right: 0; } /* Right-align hatch in mirror view */
:checked[value^="l00"] ~ .shadow .bottom { right: 0; }
.left.face :checked[value^="l00"] ~ .shadow .bottom { right: initial; left: 0; z-index: 99; }
:checked[value="w6"] ~ :checked[value="a3"] ~ .shadow .bottom { margin-left: -12px; }

/* Form-based editor */
.bus {
    display: inline-block;
    margin: 1%;
    border: 1px solid #eee;
    padding: 10px 10px 5px;
    border-radius: 10px;
    white-space: nowrap;
    background-color: rgba(0,0,0,25%);
}

/* Linear viewer */
.bus-view {
    margin: 20px;
    white-space: nowrap;
    display: inline-block;
    box-shadow: 0px 5px 5px rgba(128, 128, 128, 0.7);
}

/* Keep picker within viewport. */
.bus .left.face .picker {
    transform-origin: top center;
    transform: scale(0.75) rotate(180deg) translate(100%, 53px);
}
.bus .left.face .slot:nth-child(-n+5) .picker {
    transform-origin: top left;
    transform: scale(0.75) rotate(180deg) translate(-100%, 53px);
}
.bus .right.face .slot:nth-last-child(-n+5) .picker {
    transform-origin: top center;
    transform: scale(0.75) translateX(-100%);
}
.bus .right.face .slot:nth-child(-n+5) .picker {
    transform-origin: top left;
    transform: scale(0.75);
}
.bus .front.face .picker {
    transform-origin: 60% -100%;
    transform: scale(0.75) rotate(90deg) translateX(-30%);
}
.bus .rear.face .picker {
    transform-origin: -25% -50%;
    transform: scale(0.75) rotate(-90deg);
}

/* Hide "+" and "-" where not allowed. */
.face:is(.front,.rear) .picker :is(.insert, .delete),
.face:is(.right) :checked:is([value^="h"]) ~ .picker :is(.insert, .delete),
.face:is(.right) :checked:is([value^="t"]) ~ .picker .delete,
.face:is(.left) :checked:is([value^="h"], [value^="t"]) ~ .picker .delete,
/* Prevent part selection out of context. */
.face :checked:is([value^="h"]) ~ .picker label:not(.h),
.face :checked:is([value^="t"]) ~ .picker label:not(.t),
.front.face .picker label:not(.f),
.rear.face .picker label:not(.r),
.face:is(.right, .left) .picker :is(.f, .r),
.face:is(:not(.top)) .picker .s {
    display: none;
}

/* Mirror right side */
.bus-view .left span,
.left .slot .tile,
.left .slot .picker input + :not(.r),
/* Mirror one level up to affect clipping mask too. */
.left .slot :checked:is([value^="h"], [value^="t"]) ~ .shadow label,
.slot :checked[value^="f"] ~ .shadow .slot .tile {
    transform: scaleX(-1);
}
/* Undo mirroring since it's been done one level up. */
.left .slot :checked:is([value^="h"], [value^="t"]) ~ .shadow .tile {
    transform: initial;
}

/* Hide bottom parts from picker by default */
.tile.bottom,
.picker .conditional,
.picker .conditional ~ label { display: none; }

/* Show bottom parts after top parts allow it */
.shadow,
:checked[value^="w"] ~ .conditional ~ :checked  ~ .shadow .tile.bottom,
:checked[value^="w"] ~ .picker .conditional,
:checked[value^="w"] ~ .picker .conditional ~ label { display: inline-block; }