/**
* Styles for tool panel dividers used in tool panel labels.
* These styles are used for dividers in the new "My Tools" panel, but they
* can also be used in the "Full Tools" panel for consistency once the new panel is stable.
*/

.tool-panel-divider {
    align-items: center;
    background: transparent;
    border-left: 0;
    display: flex;
    gap: 0.5rem;
    font-size: $font-size-base;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    text-transform: none;

    &::before,
    &::after {
        border-bottom: 1px solid currentColor;
        content: "";
        flex: 1;
        opacity: 0.35;
    }
}

.tool-panel-divider-text {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    white-space: nowrap;
}

.tool-panel-divider-toggle {
    opacity: 0.8;
}

.tool-panel-divider-icon {
    opacity: 0.8;
}

.tool-panel-divider-action {
    margin-left: 0;
}

.tool-panel-divider-link {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    justify-content: center;
    padding: 0;
    text-decoration: none;
}

.tool-panel-divider .title-link,
.tool-panel-divider .title-link:hover,
.tool-panel-divider .title-link:focus,
.tool-panel-divider .title-link:focus-visible {
    background: transparent;
}