.toolbar {
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .toolbar-item {
        width: min-content;
        height: min-content;
        display: flex;
        justify-content: center;
        margin: 0 0.8rem;
    }

    .icon-button {
        border-radius: 5px;
        padding: 0.3rem;
        transition: fill, box-shadow 0.3s ease;
        

        svg{
            width: 1rem;
            height: 1rem;
        }

        &:not(.disable):hover {
            cursor: pointer;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
            fill: var(--dc-color-primary);
        }

        &.disable{
            fill: var(--dc-color-secondary);
        }
    }

}