@import "../../../../less/Common/Constants";

@ButtonIconSize: 18px;

.commandBar {
    padding-left: @DefaultSpace;
    border-bottom: @ButtonBorderWidth solid @BaseMedium;
    display: flex;
    overflow: hidden;
    height: @topcommandbarheight;

    .staticCommands {
        list-style: none;
        margin: 0px;
        padding: 0px;
        display: flex;
        flex: 0 0 auto;
    }

    .overflowCommands {
        display:flex;
        flex: 1 0 auto;

        .visibleCommands {
            display: inline-flex;
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

        .partialSplitterContainer {
            padding: @SmallSpace @DefaultSpace @SmallSpace @SmallSpace;
            .flex-display();
        }
    }

    .commandExpand {
        border: none;
        padding: 0px;
        direction: rtl;

        &:hover {
            .hover();
            cursor: pointer;
            & > .commandDropdownContainer {
                display: block !important; // TODO: Remove after reusing KO mouseover and mouseout event handlers
            }
        }

        &:focus {
            .focus();
        }

        .commandDropdownLauncher {
            direction: ltr;
            padding-top: @SmallSpace;

            .commandIcon {
                vertical-align: text-top;
            }

            .commandBarEllipses {
                font-weight: bold;
                font-size: 20px;
            }
        }
    }

    .hiddenCommandsContainer > .commandDropdownLauncher {
        padding: 0px @DefaultSpace;
    }

    .commandDropdownContainer {
        display: none;
        z-index: 1000;
        direction: ltr;
        position: absolute;
        width: fit-content;
        padding: 0px;
        background-color: @BaseLight;
        box-shadow: 1px 2px 6px @BaseMediumHigh, -2px 2px 6px @BaseMediumHigh;

        .commandDropdown {
            display: flex;
            flex-direction: column;
            padding: 0px;
            margin: 0px;
        }
    }

    .feedbackButton {
        margin-right: @LargeSpace;
        white-space: nowrap;
    }
}

command-button,
.commandButtonReact {
    display: inline-flex;
    .commandButtonComponent {
        width: 100%;
        color: @BaseHigh;
        background-color: transparent;
        text-decoration: none;
        border: @ButtonBorderWidth solid transparent;
        .flex-display();

        &:hover:not(.commandDisabled) {
            cursor: pointer;
            .hover();
        }

        &:active:not(.commandDisabled) {
            border: @ButtonBorderWidth dashed @AccentMedium;
            .active();
        }

        &:focus:not(.commandDisabled) {
            border: @ButtonBorderWidth dashed @AccentMedium;
        }

        .commandContent {
            padding: @DefaultSpace @DefaultSpace @DefaultSpace;
            flex: 0 0 auto;

            .commandIcon {
                margin: 0 @SmallSpace 0 0;
                vertical-align: text-top;
                width: @ButtonIconSize;
                height: @ButtonIconSize;
            }

            .commandLabel {
                padding: 0px;
            }
        }

        .commandContent .hasHiddenItems {
            padding-right: @SmallSpace;
        }
    }

    .commandButtonComponent.commandDisabled {
        color: @BaseMediumHigh;
        opacity: 0.5;
    }

    .commandExpand {
        padding-top: @SmallSpace;
        padding-bottom: @SmallSpace;
        &:hover {
            .hover();
            & > .commandDropdownContainer {
                display: block !important; // TODO: Remove after reusing KO mouseover and mouseout event handlers
            }
        }

        &:focus {
            .focus();
        }

        .commandDropdownLauncher {
            cursor: pointer;
            display: inline-flex;

            .commandButtonComponent {
                padding: 0px;
            }
        }

        .expandDropdown {
            padding: @SmallSpace;

            img {
                vertical-align: top;
            }
        }

        .partialSplitter {
            margin: @SmallSpace 0px 6px;
        }
    }

    .commandButtonComponent[tabindex]:focus {
        outline: none;
    }

    .selectedButton {
        background-color: @AccentLow;
        outline: none
    }
}

.partialSplitter {
    border-left: @ButtonBorderWidth solid @BaseMediumHigh;
}

.commandDropdown .commandButtonComponent {
    padding-left: 0px;
}