.igz-action-panel {
    .action-panel-color-set();
    .action-icon-color-set();

    left: 0;
    line-height: 0;
    position: relative;
    transition: @igz-basic-transition;

    &.ng-hide {
        left: -100%;
    }

    .actions-list {
        transition: none;

        &.ng-hide {
            opacity: 0;
        }

        &.empty {
            line-height: 39px;
            padding: 1px 19px;
            font-size: 17px;
            letter-spacing: 0.2px;
            color: @action-list-empty-color;
        }

        .igz-action-item {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: @action-item-bg-color;
            border-radius: 50%;
            color: @action-item-color;
            cursor: pointer;
            float: left;
            font-size: 18px;
            height: 40px;
            margin: 0 8px 0 0;
            position: relative;
            transition: color .2s ease-out;
            width: 40px;
            z-index: 2;

            &:last-of-type {
                margin-right: 0;
            }

            &.inactive {
                pointer-events: none;

                &:hover {
                    color: @action-item-inactive-hover-color;
                }

                .action-icon {
                    color: @action-icon-inactive-color;
                    cursor: default;
                }
            }

            &.active {
                background-color: @action-item-active-bg-color;
            }

            &:not(.inactive) {
                &:hover {
                    overflow: visible;
                    background-color: @action-item-hover-bg-color;
                    box-shadow: @action-item-hover-box-shadow;

                    &:active {
                        box-shadow: @action-item-hover-active-box-shadow;
                        background-color: @action-item-hover-active-bg-color;
                    }

                    .action-icon {
                        color: @action-icon-hover-color;
                    }
                }

                &:focus {
                    background-color: @action-item-hover-bg-color;
                    box-shadow: @action-item-focus-box-shadow;
                    &:hover {
                        box-shadow: @action-item-focus-hover-box-shadow;
                    }
                }
            }

            &.subtemplate-show {
                transition: none;
                background-color: @dropdown-menu-subtemplate-show-bg-color;
                box-shadow: @dropdown-menu-subtemplate-show-box-shadow;

                &:hover {
                    background-color: @dropdown-menu-subtemplate-show-hover-bg-color;
                    box-shadow: @dropdown-menu-subtemplate-show-hover-box-shadow;
                }

                .action-icon {
                    color: @action-icon-hover-color;
                }
            }

            &.last-item {
                margin: 0;
            }

            .upload-action {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .action-icon {
                color: @action-icon-color;
            }

            .action-label {
                display: none;
            }

            .filter-counter {
                position: absolute;
                left: 26px;
                top: 2px;
                display: inline-block;
                font-size: 12px;
                font-weight: 500;
                text-align: center;
                line-height: 16px;
                color: @action-item-filter-counter-color;
                min-width: 16px;
                height: 15px;
                padding: 0 4px;
                border-radius: 7.5px;
                background-color: @action-item-filter-counter-bg-color;
            }

            .item-dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0;
                padding: 8px 0;
                list-style: none;
                font-size: 13px;
                font-weight: 500;
                color: @dropdown-menu-color;
                border-radius: 2px;
                background-color: @dropdown-menu-bg-color;
                box-shadow: @dropdown-menu-box-shadow;
                margin-top: 1px;
                z-index: 10;

                .item-dropdown-menu-list {
                    margin: 0;
                    display: block;
                    padding: 0;
                    list-style-type: none;

                    li {
                        height: 32px;
                        line-height: 32px;
                        text-align: left;
                        display: flex;

                        &:hover {
                            background-color: @dropdown-menu-li-hover-bg-color;

                            .action-icon {
                                color: @action-icon-hover-color;
                            }
                        }

                        .action-label {
                            display: inline-block;
                            white-space: nowrap;
                            vertical-align: top;
                            margin-right: 17px;
                        }

                        .action-icon {
                            color: @action-icon-color;
                            font-size: 17px;
                            display: inline-block;
                            margin: 0 13px 0 21px;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
    }

    .action-subtemplate {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border: @action-subtemplate-border;
        background-color: @action-subtemplate-bg-color;
        box-shadow: @action-subtemplate-box-shadow;
        position: fixed;
        margin: -2px 0 0 -1px;
        z-index: 10;
    }
}