:root {
    flex-grow: 1;
}

#PanelButton {
    border-width: 1px;
    border-color: transparent; /* Set to transparent to avoid layout shifts */
    border-radius: 4px;
    transition-duration: 0.2s; /* Smooth out the transition */
    margin: 1px;
    padding-right: 2px;
    padding-left: 2px;
    overflow: hidden;
}

#PanelButton.enabledAction:hover {
    border-color: #0055CC; /* Change to your desired border color */
    border-width: 1px;
    background-color: #444444;
}

#PanelButton.toolbarHorizontalMode {
    width: 32px;
    height: 20px;
    max-width: 32px;
    max-height: 20px;
    min-width: 32px;
    min-height: 20px;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    margin: 1px 0 0 1px;
    padding-right: 2px;
    padding-left: 2px;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    border-radius: 3px;
}

#PanelButton.toolbarVerticalMode {
    width: 32px;
    height: 22px;
    max-width: 32px;
    max-height: 22px;
    min-width: 32px;
    min-height: 22px;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    margin: 0 0 1px;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    border-radius: 3px;
}

#ActionColor {
    margin-left: 1px;
    margin-right: 1px;
}

#ActionColor.toolbarMode {
    height: 16px;
    max-height: 16px;
    min-height: 16px;
    width: 4px;
    max-width: 4px;
    min-width: 4px;
    background-position-x: left 0;
}

#ActionIcon {
    margin-left: 1px;
    margin-right: 1px;
    width: 16px;
    height: 16px;
    min-height: 16px;
    min-width: 16px;
    max-width: 16px;
    max-height: 16px;
}

#ActionIcon.toolbarMode {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    min-height: 16px;
    min-width: 16px;
    background-position-x: center;
}

#ActionName {
    margin-left: 1px;
    margin-right: 1px;
}

#ActionName.toolbarMode {
    display: none;
}

#PanelButton.panelMode {
    flex-direction: row;
    min-width: 30px;
}

.actionButton {
    flex-shrink: 1;
    flex-grow: 1;
    flex-direction: row;
}