:host-context(.win98) {
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    position: relative;
    background-color: #d4d0c8;

    .taskbar-button {
        width: 100%;
        min-width: 25px;
        max-width: 160px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0px 5px;
        z-index: 2;
        writing-mode: horizontal-tb;

        &.os-active {
            font-weight: bold;
        }

        .icon {
            min-width: 16px;
            min-height: 16px;
            margin-right: 5px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    &:host-context(.taskbar-top) {
        width: 100%;
        min-height: 33px;
        box-shadow:
            inset -1px -1px #0a0a0a,
            inset 1px 1px #ffffff,
            inset -2px -2px #808080,
            inset 2px 2px #dfdfdf;

        &.has-window-refs {
            min-height: fit-content;
        }

        .taskbar-button {
            margin: 2px 3px;
        }
    }

    &:host-context(.taskbar-bottom) {
        width: 100%;
        min-height: 33px;

        &.has-window-refs {
            min-height: fit-content;
        }

        &::before {
            width: 100%;
            height: 1px;
            top: 1px;
            left: 0px;
            position: absolute;
            background-color: #ffffff;
            content: '';
        }

        .taskbar-button {
            margin: 2px 3px;
        }
    }

    &:host-context(.taskbar-left) {
        min-width: 35px;
        height: 100%;
        writing-mode: vertical-lr;
        box-shadow:
            inset -1px -1px #0a0a0a,
            inset 1px 1px transparent,
            inset -2px 0px #808080,
            inset 2px 2px transparent;

        &.has-window-refs {
            min-width: fit-content;
        }

        .taskbar-button {
            width: 25px;
            margin: 3px;
        }
    }

    &:host-context(.taskbar-right) {
        min-width: 35px;
        height: 100%;
        writing-mode: vertical-lr;

        &.has-window-refs {
            min-width: fit-content;
        }

        &::before {
            width: 1px;
            height: 100%;
            left: 1px;
            top: 0px;
            position: absolute;
            background-color: #ffffff;
            content: '';
        }

        .taskbar-button {
            width: 25px;
            margin: 3px;
        }
    }
}
