.p-dock {
    .p-dock-list {
        background: $dockBg;
        border: $dockBorder;
        padding: $dockPadding;
        border-radius: $dockBorderRadius;
    }
    
    .p-dock-item {
        padding: $dockItemPadding;
    }

    .p-dock-action {
        width: $dockActionWidth;
        height: $dockActionHeight;
    }
    
    &.p-dock-magnification {
        &.p-dock-top,
        &.p-dock-bottom {
            .p-dock-item-second-prev,
            .p-dock-item-second-next {
                margin: 0 $dockSecondItemsMargin;
            }

            .p-dock-item-prev,
            .p-dock-item-next {
                margin: 0 $dockFirstItemsMargin;
            }

            .p-dock-item-current {
                margin: 0 $dockCurrentItemMargin;
            }
        }

        &.p-dock-left,
        &.p-dock-right {
            .p-dock-item-second-prev,
            .p-dock-item-second-next {
                margin: $dockSecondItemsMargin 0;
            }
            
            .p-dock-item-prev,
            .p-dock-item-next {
                margin: $dockFirstItemsMargin 0;
            }

            .p-dock-item-current {
                margin: $dockCurrentItemMargin 0;
            }
        }
    }
}

@media screen and (max-width: 960px) {
    .p-dock {
        &.p-dock-top,
        &.p-dock-bottom {
            .p-dock-container {
                overflow-x: auto;
                width: 100%;

                .p-dock-list {
                    margin: 0 auto;
                }
            }
        }

        &.p-dock-left,
        &.p-dock-right {
            .p-dock-container {
                overflow-y: auto;
                height: 100%;

                .p-dock-list {
                    margin: auto 0;
                }
            }
        }

        &.p-dock-magnification {
            &.p-dock-top,
            &.p-dock-bottom,
            &.p-dock-left,
            &.p-dock-right {
                .p-dock-item-second-prev,
                .p-dock-item-second-next,
                .p-dock-item-prev,
                .p-dock-item-next,
                .p-dock-item-current {
                    transform: none;
                    margin: 0;
                }
            }
        }
    }
}