/* reset */
a,
button {
    all: unset;
}

.ToolbarRoot {
    display: flex;
    min-width: max-content;
    border-radius: var(--size-50);
    background-color: var(--background-neutral-container);
    box-shadow: var(--shadow-level-1);
    &.fluid {
        width: 100%;
    }
    &[aria-orientation="horizontal"] {
        padding: var(--size-50) var(--size-100);
        flex-direction: row;
    }
    &[aria-orientation="vertical"] {
        padding: var(--size-50) var(--size-50);
        flex-direction: column;
    }
}

// .ToolbarToggleItem,
// .ToolbarLink,
// .ToolbarButton {
//     flex: 0 0 auto;
//     color: var(--foreground-neutral);
//     height: 40px;
//     padding: 0 5px;
//     border-radius: 4px;
//     display: inline-flex;
//     font-size: 13px;
//     line-height: 1;
//     align-items: center;
//     justify-content: center;
// }
// .ToolbarToggleItem:hover,
// .ToolbarLink:hover,
// .ToolbarButton:hover {
//     background-color: var(--violet-3);
//     color: var(--violet-11);
// }
// .ToolbarToggleItem:focus,
// .ToolbarLink:focus,
// .ToolbarButton:focus {
//     position: relative;
//     box-shadow: 0 0 0 2px var(--violet-7);
// }

// .ToolbarToggleItem {
//     background-color: white;
//     margin-left: 2px;
// }
// .ToolbarToggleItem:first-child {
//     margin-left: 0;
// }
// .ToolbarToggleItem[data-state="on"] {
//     background-color: var(--violet-5);
//     color: var(--violet-11);
// }

.ToolbarSeparator {
    width: 1px;
    background-color: var(--border-neutral-subtle);
    margin: 0 var(--size-100);
}

// .ToolbarLink {
//     background-color: transparent;
//     color: var(--foreground-neutral);
//     display: none;
//     justify-content: center;
//     align-items: center;
// }
// .ToolbarLink:hover {
//     background-color: transparent;
//     cursor: pointer;
// }
// @media (min-width: 520px) {
//     .ToolbarLink {
//         display: inline-flex;
//     }
// }

// .ToolbarButton {
//     padding-left: 10px;
//     padding-right: 10px;
//     color: white;
//     background-color: var(--violet-9);
// }
// .ToolbarButton:hover {
//     background-color: var(--violet-10);
//     color: white;
// }