.application-focus-pills {
    row-gap: 0.5rem;
}

.mud-button-root.application-focus-pill {
    border-radius: 9px;
    text-transform: none !important;
    min-width: unset;
    min-height: 30px !important;
    height: 30px;
    padding: 0 1rem;
    font-size: 0.8125rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: border-color 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
    box-shadow: none;
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    background-color: transparent;
}

.mud-button-root.application-focus-pill:hover {
    border-color: #98a2b3;
    color: var(--mud-palette-text-primary);
}

.mud-button-root.application-focus-pill.active {
    background-color: transparent;
    border-color: #3b82f6;
    color: #c1d5f4;
    font-weight: 700;
}

.mud-button-root.application-focus-pill.active:hover {
    background-color: transparent;
    border-color: #0b4fb3;
    color: #0b4fb3;
}

.mud-button-root.application-focus-pill-icon {
    min-width: 30px;
    width: 30px;
    min-height: 30px !important;
    height: 30px;
    padding: 0;
}

@media (max-width: 600px) {
    .mud-button-root.application-focus-pill {
        min-height: 28px !important;
        height: 28px;
    }

    .mud-button-root.application-focus-pill-icon {
        min-width: 28px;
        width: 28px;
        min-height: 28px !important;
        height: 28px;
    }
}