:host-context(.win10) {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(40px);

    @supports (not(backdrop-filter: blur(40px))) {
        background-color: rgba(255, 255, 255, .98);
    }

    $button-width: 61px;

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

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

        .taskbar-button {
            ::before {
                width: 51px;
                height: 3px;
                top: 0;
                left: 6px;
            }

            &:hover ::before {
                width: 100%;
                left: 0px;
            }

            &.os-active ::before {
                width: 100%;
                left: 0px;
            }
        }
    }

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

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

        .taskbar-button {
            ::before {
                width: 51px;
                height: 3px;
                bottom: 0;
                left: 6px;
            }

            &:hover ::before {
                width: 100%;
                left: 0px;
            }

            &.os-active ::before {
                width: 100%;
                left: 0px;
            }
        }
    }

    &:host-context(.taskbar-left) {
        min-width: $button-width;
        height: 100%;
        writing-mode: vertical-lr;

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

        .taskbar-button {
            ::before {
                width: 3px;
                height: 38px;
                top: 6px;
                left: 0;
            }

            &:hover ::before {
                height: 100%;
                top: 0px;
            }

            &.os-active ::before {
                height: 100%;
                top: 0px;
            }
        }
    }

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

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

        .taskbar-button {
            ::before {
                width: 3px;
                height: 38px;
                top: 6px;
                right: 0;
            }

            &:hover ::before {
                height: 100%;
                top: 0px;
            }

            &.os-active ::before {
                height: 100%;
                top: 0px;
            }
        }
    }

    .taskbar-button {
        width: $button-width;
        min-width: $button-width;
        max-width: $button-width;
        height: 50px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
        background: transparent;
        border: none;
        box-shadow: none;
        transition: background 0.3s ease;

        ::before {
            content: '';
            position: absolute;
            background: rgb(var(--os-primary-color));
            transition: all 0.15s ease;
        }

        &:hover {
            background: rgba(255, 255, 255, .5);
        }

        .icon {
            width: 30px;
            height: 30px;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .text {
            display: none;
        }

        &.os-active {
            background-color: rgba(255, 255, 255, .5);
            transform: none;

            &:hover {
                background-color: rgba(255, 255, 255, .8);
            }
        }
    }
}
