/**
 * Buttons
 * Button variants, button bars, role-button overrides, toolbar button styles,
 * state field buttons, and filter reset buttons.
 */

a.secondary,
.button_secondary {
    background: transparent;
    color: var(--pico-primary);
    border-color: var(--pico-primary);
}

.button_primary:hover {
    color: white;
}

.page_content [role="button"] {
    --pico-form-element-spacing-vertical: 7px;
    --pico-form-element-spacing-horizontal: 12px;
}

.primary {
    background: #0077a5;
    border-color: #0077a5;
}

.primary:hover {
    --pico-primary-hover: #fff;
    color: var(--pico-primary-hover);
}

.button_save.primary {
    background: var(--pico-background-success);
    border: 0;
    z-index: 1;
}

.button_delete.primary {
    background: red;
    border: 0;
    color: white !important;
    text-align: left;
}

.button_delete.primary:hover {
    background: red;
    border: 0;
    color: white !important;
    text-align: left;
}

.inline_toolbar .button_delete,
.button_delete {
    background: red!important;
    color: white!important;
    border-color: red!important;
}

.toolbar .button_delete {
    background: var(--pico-background-error) !important;
    color: white !important;
}

.buttonbar {
    white-space: nowrap;
    padding-block-end: var(--pico-spacing);
    display: flex;
    gap: var(--pico-spacing);
    flex: 1;
    flex-wrap: wrap;
}

.buttonbar .secondary {
    --pico-color: var(--pico-color-nav);
    background: var(--pico-secondary-background-button-bar);
    border-color: var(--pico-border-color-button-bar);
}

.buttonbar a[role="button"] i {
    margin-left: 5px;
    font-size: var(--hb-font-size-xs);
    top: -1px;
    position: relative;
}

.button_group {
    margin: 0;
}

.toolbar .primary {
    border: 0;
}

.toolbar [role="button"]:not(.primary) {
    background: var(--pico-secondary-background-button-bar);
    color: var(--pico-contrast);
    border: none;
    padding: 5px 13px;
    border-radius: 7px;
}

.inline_toolbar [role="button"]:not(.primary) {
    background: var(--pico-secondary-background-button-bar);
    color: var(--pico-contrast);
    border: none;
    padding: 5px 13px;
    border-radius: 7px;
}

.toolbar .primary {
    border: 0;
}

.toolbar details summary[role="button"]:not(.outline)::after {
    filter: brightness(0) invert(0);
}

.toolbar details.dropdown[open] summary+ul:before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--pico-dropdown-background-color);
    position: absolute;
    left: 20px;
    top: -5px;
    rotate: 45deg;
}

.toolbar div#reset_filters {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pico-form-element-border-color);
    background: transparent;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

.titlebar .primary {
    background: var(--pico-background-success);
    border: 0;
}

.left_toolbar label {
    background: var(--pico-secondary-background-button-bar);
    color: var(--pico-contrast);
    border: none;
    padding: 5px 13px;
    border-radius: 7px;
}

.tabbar [role="button"] {
    border: none;
    /* font-weight: 600; */
    color: var(--pico-contrast);
    border-radius: 0;
    padding: 5px 10px;
    font-size: var(--hb-font-size-sm);
}

.tabbar [role="button"]:hover {
    border-bottom: 2px solid var(--pico-secondary);
}

[role="button"]:is([aria-current]:not([aria-current="false"])) {
    border-bottom: 2px solid var(--pico-primary);
    color: var(--pico-primary);
    font-weight: 600;
}

.outline {
    border: 1px solid var(--pico-form-element-border-color);
    color: var(--pico-color-nav);
    background: var(--pico-background-cardform);
}

.tabbar .outline {
    background: transparent;
}

.active {
    background: linear-gradient(0deg,
        rgba(63, 127, 171, 1) 0%,
        rgba(27, 65, 91, 1) 100%);
    color: #fff;
    border-color: transparent;
}

.btn-reset-filters {
    background: none;
    border: 1px solid var(--pico-form-element-border-color);
    color: var(--pico-muted-color);
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    font-size: 1rem;
    line-height: var(--pico-line-height);
}

.btn-reset-filters:hover {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

.btn-no-solution {
    display: inline-block;
    background: #b82525;
    border-color: #b82525;
    margin-right: 1rem;
}

section#create_ticket_section .btn-no-solution {
    display: inline-block;
    background: var(--pico-primary);
    border-color: var(--pico-primary);
    margin-right: 1rem;
}

div#btn-solution-found {
    display: inline-block;
    background: #25b826;
    border-color: #25b826;
}

.state_field a[role=button] {
    border-color: #bfbfbf;
    color: #646464;
    padding: 2px 5px;
    background: #d7d7d7;
    border-radius: 8px;
}

.state_field {
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

a.listform_filter_toggle[role="button"] {
    display: none;
}

@media (max-width: 768px) {
    a.listform_filter_toggle[role="button"] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
}