@import '../../lib/journal.css';

.comma-list {
  display: inline;
  list-style: none;
  padding-left: 0;
}

.comma-list > li {
  display: inline-block;
}

.comma-list > li:not(:last-child):after {
  content: ",";
  margin-right: 0.5em;
}

.service-top-panel {
    padding-bottom: 1.25rem;
    display: flex;
    align-items: baseline;
}

.service-top-panel > .service-name {
    margin: 0 1.5rem 0 0;
}

.service-top-panel .onoff-ct {
    vertical-align: text-bottom;
}

/* Make the kebab wrapper and button flex to parents for proper alignment */
.service-top-panel .dropdown-kebab-pf,
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle {
    display: flex;
}

/* Remove unnecessary margin */
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle {
    margin: 0;
}

/* Use up to 13rem width for the kebab space (including menu) */
.service-top-panel .dropdown-kebab-pf {
    flex: auto;
    max-width: 13rem;
}

/* Bump up the z-index to menu's z-index + 1 */
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle[aria-expanded=true] {
    position: relative;
    z-index: 1001;
}

/* Recreate the ^ menu pointer, but under the button itself */
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle[aria-expanded=true]:before,
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle[aria-expanded=true]:after {
    border: 10px solid var(--pf-global--BorderColor--200);
    border-top-width: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -0.5rem;
    /* Start element at 50% width */
    left: 50%;
    /* Bump element to the left ½ its width */
    transform: translateX(-50%);
}

/* Recolor inner triangle and bump down a pixel to overlap */
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle[aria-expanded=true]:after {
    border-bottom-color: var(--pf-global--BackgroundColor--100);
    bottom: calc(-0.5rem - 1px);
}

/* Turn off PF3 kebab menu's ^ caret */
.service-top-panel .dropdown-kebab-pf > .dropdown-menu::before,
.service-top-panel .dropdown-kebab-pf > .dropdown-menu::after {
    display: none;
}

/* Reposition kebab menu */
.service-top-panel .dropdown-kebab-pf > .dropdown-menu {
    left: auto;
    right: 0;
    margin: 0 -0.5rem;
    min-width: calc(100% + 1rem);
    top: calc(100% + 0.5rem);
}

.action-button {
    margin-left: 2rem;
}

#service-details .ct-form > :not(hr) {
    line-height: 1.5rem;
    row-gap: normal;
}

.ct-form .closer-lines {
    margin: 0;
}

.status-icon::before {
    color: inherit;
}

.status-icon {
    padding-right: 0.5rem;
    color: var(--pf-global--icon--Color--light);
}

.status-icon.spinner.spinner-xs {
    height: 1rem;
    width: 1rem;
    margin-right: 0.5rem;
}

.status-running > .status-icon,
.status-enabled > .status-icon {
    /* mid-way between PF4 success-100 & 200; then rounded to AA contrast */
    color: #6da000;
}

.status-failed > .status-icon,
.status-failed > .status,
.control-label.failed {
    color: var(--pf-global--danger-color--200);
}

.side-note {
    color: var(--pf-global--Color--300);
    padding-left: 1em;
}

.font-xs {
    font-size: var(--pf-global--FontSize--xs);
}

.list-group-item {
    border: none;
}
