.dx-toolbar {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: .25rem;
border: none;
border-radius: .5rem;
box-shadow: inset 0 0 0 1px var(--primary-color-6);
gap: .25rem;
}
.dx-toolbar-demo {
display: flex;
max-width: 30rem;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.dx-toolbar button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border: none;
border-radius: calc(.5rem - .25rem);
background: none;
color: var(--secondary-color-4);
cursor: pointer;
gap: .25rem;
}
.dx-toolbar button:hover:not([disabled]),
.dx-toolbar button:focus-visible {
background: var(--light, var(--primary-color-4))
var(--dark, var(--primary-color-7));
color: var(--secondary-color-1);
}
.dx-toolbar button:disabled {
color: var(--secondary-color-5);
cursor: not-allowed;
}
.dx-toolbar-group {
display: flex;
flex-direction: row;
gap: 5px;
}
.dx-toolbar-separator {
width: 1px;
height: 24px;
margin: 0 5px;
background-color: var(--primary-color-6);
}
.dx-toolbar-content p {
padding: 0;
margin: 0;
}
.dx-toolbar-demo p {
padding: 0;
margin: 0;
}