.button-bar, .modal-footer {
    display: flex;
}

.button-bar button, .button-bar a, .modal-footer button {
    flex: 1;
    text-align: center;
    margin: 0 4px;
}

.button-bar button:first-child, .button-bar a:first-child, .modal-footer button:first-child {
    margin-left: 0;
}

.button-bar button:last-child, .button-bar a:last-child, .modal-footer button:last-child {
    margin-right: 0;
}

.btn-xs, .btn-group-xs > .btn {
    --ct-btn-padding-y: 0.14rem;
    --ct-btn-padding-x: 0.4rem;
    --ct-btn-font-size: 0.675rem;
    --ct-btn-border-radius: 0.1rem;
}

.btn-xxs, .btn-group-xxs > .btn {
    --ct-btn-padding-y: 0.08rem;
    --ct-btn-padding-x: 0.2rem;
    --ct-btn-font-size: 0.475rem;
    --ct-btn-border-radius: 0.1rem;
}


/* Ensure the button is positioned so icons can overlap */
.button-toggle-menu {
    position: relative;
    width: 100%;
    height: 35px;
    cursor: pointer;
    background-color: var(--ct-help-box-bg);
    color: var(--ct-menu-item-hover-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-toggle-menu:hover {
    color: var(--ct-menu-item-active-color);
}



/* Container that holds the toggle button */
.sidebar-toggle-container {
    float: right;
}

.sidebar-enable .sidebar-toggle-container {
    float: unset;
}

/* Float button to the right, keep it clean and flat */
.button-toggle-menu {
    padding: 0 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* required for icon overlay positioning */
}

/* Icons overlap so we can animate between them */
.side-close-icon,
.side-open-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    pointer-events: none;
    transition:
            opacity .35s ease,
            transform .35s ease;
}

/* Default sidebar closed state */
.side-close-icon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

.side-open-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-360deg);
}

/* Sidebar open state (Hyper adds .sidebar-enable) */
.sidebar-enable .side-close-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(360deg);
}

.sidebar-enable .side-open-icon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Clear float to avoid layout issues after the button */
.sidebar-toggle-container::after {
    content: "";
    display: block;
    clear: both;
}

.ts-control {
    padding: 0.45rem 0.9rem !important;
}


.focus .ts-control {
    border: 1px solid var(--ct-primary-border-subtle) !important;
    box-shadow: none;
}

.ts-dropdown .active {
    background-color: var(--ct-primary-bg-subtle)
}

.ts-dropdown-content {
    max-height: 300px;
}