/* @define JobAndJobGroupWorkflowTransition */

/* stylelint-disable plugin/selector-bem-pattern */
.JobAndJobGroupWorkflowTransition-dropdownButton .dropdown-toggle {
    background: var(--primary-subtle);
    border-radius: 50px;
    color: var(--primary);
    border: none;
}

.JobAndJobGroupWorkflowTransition-dropdownButton .dropdown-item {
    padding-left: var(--padding-xs);
    padding-right: var(--padding-sm);
}

.JobAndJobGroupWorkflowTransition-dropdownButton .dropdown-item .badge {
    flex: 1 1 auto;
    text-align: left;
}

/*
    Neutralise the dropdown-item's hover/focus background while the info icon
    inside it is being hovered, so hovering the icon doesn't look like it fills
    the whole row. The icon's own hover colour is still applied below.
*/
.JobAndJobGroupWorkflowTransition-dropdownButton .dropdown-item:has(.JobAndJobGroupWorkflowTransition-info:hover) {
    background-color: transparent;
    color: inherit;
}

.JobAndJobGroupWorkflowTransition-itemContent {
    width: 100%;
}

.JobAndJobGroupWorkflowTransition-currentStateIcon {
    width: 30px;
    height: 30px;
}

.JobAndJobGroupWorkflowTransition-dropdownButton.show .btn-secondary.dropdown-toggle,
.JobAndJobGroupWorkflowTransition-dropdownButton .btn-secondary.dropdown-toggle:focus,
.JobAndJobGroupWorkflowTransition-dropdownButton .btn-secondary.dropdown-toggle:active {
    background-color: var(--primary-subtle);
    color: var(--primary);

    /* Not using the css variable here (supposed to be text-link-color) because of the alpha */
    box-shadow: 0 0 0 3.2px #7059e840;
}

.JobAndJobGroupWorkflowTransition-dropdownButton .dropdown-menu.show {
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    padding: 8px 0;
    max-height: 350px;
    overflow-y: auto;
    min-width: 250px;
}

.JobAndJobGroupWorkflowTransition-dropdownButton .popover:has(.JobAndJobGroupWorkflowTransition-infoConditionsTitle) .arrow::after {
    border-bottom-color: var(--warning);
}

.JobAndJobGroupWorkflowTransition-dropdownButton .popover {
    width: 390px;
    max-width: 80vw;
    border-radius: 4px;
}

.JobAndJobGroupWorkflowTransition-dropdownButton .popover-body {
    padding: 0;
}

.JobAndJobGroupWorkflowTransition-dropdownButton .popover:not(.bs-popover-bottom) .JobAndJobGroupWorkflowTransition-infoConditionsTitle::after {
    display: none;
}

/* stylelint-enable plugin/selector-bem-pattern */

.JobAndJobGroupWorkflowTransition-info {
    width: 30px;
    height: 30px;
    color: var(--icon-subtle);
}

.JobAndJobGroupWorkflowTransition-info:hover .fa-info-circle {
    color: var(--primary);
}

.JobAndJobGroupWorkflowTransition-info:hover .fa-warning {
    color: var(--icon-warning) !important;
}

.JobAndJobGroupWorkflowTransition-infoConditionsTitle {
    background: var(--warning);
    color: var(--text-inverse);
    padding: 20px 16px;
    border-radius: 4px 4px 0 0;
    font-weight: var(--font-weight-bold);
    position: relative;
}

.JobAndJobGroupWorkflowTransition-infoConditions {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.JobAndJobGroupWorkflowTransition-infoCondition {
    color: var(--text-accent);
    width: 380px;
    max-width: 100%;
    display: flex;
    align-items: start;
}

.JobAndJobGroupWorkflowTransition-infoCondition:not(:last-child) {
    margin-bottom: 24px;
}