@import "bus.gradients.css";

.h, .slot :checked[value^="h"] ~ .shadow label {
    clip-path: polygon(
      0% 0%, 50% 0%,
             90% 45%, 95% 45%,
                      95% 70%,
                          100% 70%,
                          100% 80%,
                      95% 80%,
             50% 90%,
      0% 90%, 0% 90%
    );
}
.slot :checked[value^="f"] ~ .slot :checked[value^="t"] ~ .shadow label,
.slot :checked[value^="f"] ~ .slot :checked[value^="h"] ~ .shadow label {
    transform: scaleX(-1);
}
.slot :checked[value^="f"] ~ .slot :checked[value^="t"] ~ .shadow label .tile,
.slot :checked[value^="f"] ~ .slot :checked[value^="h"] ~ .shadow label .tile {
    transform: none;
}
.f,.slot :checked[value^="f"] ~ .shadow label {
    clip-path: polygon(
        94% 0%, 
        6% 0%,  
        4% 40%, 
        4% 85%, 
        9% 90%, 
        91% 90%,
        96% 85%,
        96% 40% 
    );
}
.r, .slot :checked[value^="r"] ~ .shadow label {
    clip-path: polygon(
        93% 0%,  
        2% 0%,   
        0% 40%,  
        0% 85%,  
        5% 88%,  
        90% 88%, 
        96% 85%,
        96% 40% 
    );
}
.t, .slot :checked[value^="t"] ~ .shadow label {
    clip-path: polygon(
      20% 0%, 100% 0%,
              100% 90%,
            50% 90%,
        75% 90%,
       0% 85%, 0% 80%,
      0 80%, 0 70%,
      0% 70%, 0% 40%
    );
}
.j, .slot :checked[value^="j"] ~ .shadow label {
    clip-path: polygon(
      0% 10%, 40% 10%,
        40% 5%, 60% 5%,
        60% 10%, 100% 10%,
      100% 85%, 60% 85%,
      60% 90%,
        40% 90%, 40% 85%,
      0 85%
    );
}

.picker .h, .picker .j, .picker .t {
    clip-path: none;
}

/*quirks*/
/*doors in base color*/
/*.bus-view .d:is(.d5, .d6, .d9),*/
:checked[value="c1"] ~ div .slot :checked:is([value=d5], [value=d6], [value=d9]]) ~ .shadow label {
    background-image: linear-gradient(to bottom, #E19000 0 6px, #e6d2b5 6px 42px, transparent 40px) ! important;
}
.bus-view .c1:is(.d5,.d6,.d9) {
    background-image: url(tiles.png), linear-gradient(to bottom, #E19000 0 6px, #e6d2b5 6px 42px, transparent 40px) !important;
}
.bus:has(:checked + .c2) .shadow:has(~ .picker :checked + .d:is(.d7, .d4)) label {
    background-image: linear-gradient(to bottom, white 10px 42px, transparent 40px);
}

.bus:has(:checked + .c7) .shadow:has(~ .picker :checked + .d) label {
    background-image: linear-gradient(to bottom, transparent 10px 31px, white 31px 42px, transparent 40px);
}
.bus:has(:checked + .c7) .shadow:has(~ .picker :checked + .h) label {
    background-image: linear-gradient(to bottom, transparent 10px 34px, white 34px 37px, transparent 37px);
    background-position: 3px 0px;
    background-repeat: no-repeat;
}
.bus:has(:checked + .c7) .shadow:has(~ .picker :checked + .t) label {
    background-image: linear-gradient(to bottom, transparent 10px 35px, white 35px 38px, transparent 38px);
    background-repeat: no-repeat;
    background-size: 4px;
}
.bus:has(:checked + .c8) .shadow:has(~ .picker :checked + .d) label {
    background-image: linear-gradient(to bottom, transparent 10px 31px, #FCE10B 31px 42px, transparent 40px);
}
.bus:has(:checked + .c8) .shadow:has(~ .picker :checked + .h) label {
    background-image: linear-gradient(to bottom, transparent 10px 34px, #FCE10B 34px 37px, transparent 37px);
    background-position: 3px 0px;
    background-repeat: no-repeat;
}
.bus:has(:checked + .c8) .shadow:has(~ .picker :checked + .t) label {
    background-image: linear-gradient(to bottom, transparent 10px 35px, #FCE10B 35px 38px, transparent 38px);
    background-repeat: no-repeat;
    background-size: 4px;
}

.c {
    min-height: 42px;
    display: inline-block;
    position: relative;
    background-position: 0px 0px;
    width: 10px;
    background-size: 30px;
    z-index: 1;
}